Uma URL (localizador uniforme de recursos) é um tipo de identificador uniforme de recursos (URI) que fornece uma maneira de acessar informações de computadores remotos, como um servidor web e armazenamento em nuvem.
Neste tutorial, ensinaremos como adicionar, criar ou configurar uma nova URL base no aplicativo React usando a biblioteca Router DOM v6. Neste tutorial você aprendeu como adicionar, criar ou definir uma nova URL base em um aplicativo React usando a biblioteca Router DOM v6.
React CRA é uma maneira genérica, porém melhor, de criar um novo aplicativo React globalmente. Aqui está o comando que ajuda você a desenvolver um novo aplicativo React.
npx create-react-app react-blog-app
Para gerenciar a URL base, certifique-se de entrar na raiz do projeto.
cd react-blog-app
No React, funcionalidades podem ser criadas com a classe, bem como componentes funcionais/ . Os componentes de função são fáceis de criar e gerenciar; portanto, crie a pasta de componentes.
Faça o arquivo componentes/Home.js com o código a seguir.
import React from 'react'
function Home() {
return (
<div>Home</div>
)
}
export default Home
Em seguida, crie o arquivo componentes/Profile.js com o código sugerido.
import React from 'react'
function Profile() {
return (
<div>Profile</div>
)
}
export default Profile
Agora, crie o arquivo componentes/Contact.js e coloque o código sugerido no arquivo.
import React from 'react'
function Contact() {
return (
<div>Contact</div>
)
}
export default Contact
React Router DOM é um pacote padrão para configurar rotas e URL que ajuda você a navegar dentro do aplicativo. Este será o módulo principal para nos ajudar a configurar a URL base, portanto, execute o comando sugerido.
npm i react-router-dom --legacy-peer-deps
Como dissemos anteriormente, as Rotas nos permitem navegar dentro do aplicativo. Para configurar ou criar novas Rotas, temos que navegar até a pasta de componentes ; aqui, crie o arquivo Nav.js
import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import Profile from "./Profile";
import Contact from "./Contact";
const Nav = () => {
return (
<div>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/profile" element={<Profile />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
);
};
export default Nav;
Adicionamos componentes de função e módulos Router DOM: Routes e Route. Os módulos Routes oferecem um contêiner para uma árvore aninhada de elementos que renderiza a ramificação que melhor corresponde ao local atual. O módulo Route é usado para declarar um elemento que deve ser renderizado em um determinado caminho de URL.
Navegue até o componente App.js e coloque o código a seguir. Você tem que importar o módulo Nav e o módulo Link. A API Link é uma API pública para renderizar um reconhecimento de histórico. Além disso, permite navegar até o componente ou página vinculado associado.
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import { Link } from "react-router-dom";
import Nav from "./components/Nav";
const App = () => {
return (
<div className="container">
<h2>React Configure Base Path Example</h2>
<div className="mb-5">
<Link className="nav-link link-danger" to="/">
Home
</Link>
<Link className="nav-link link-danger" to="profile">
Profile
</Link>
<Link className="nav-link link-danger" to="contact">
Contact
</Link>
</div>
<div>
<h3>
<Nav />
</h3>
</div>
</div>
);
};
export default App;
Para alterar o caminho base no React, certifique-se de ter adicionado o nome base ao módulo BrowserRouter no arquivo index.js.
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter basename="/positronx">
<App />
</BrowserRouter>
</React.StrictMode>
);
Finalmente testaremos o aplicativo no navegador e garantiremos que o caminho base foi alterado. Agora vamos executar o comando npm start no console.
npm start
Você pode usar o novo caminho base fornecido aqui.
http://localhost:3000/positronx
Neste tutorial você aprendeu como adicionar, criar ou definir uma nova URL base em um aplicativo React usando a biblioteca Router DOM v6.