Criando rotas com React Router DOM §

---

Para criar rotas com o React Router DOM, você pode seguir os seguintes passos:

1. Instalação do React Router DOM §

Antes de criar rotas, é necessário instalar o React Router DOM no seu projeto React. Você pode fazer isso siga o tutorial de Instalação e configuração do React Router DOM no terminal.

2. Criação do roteador §

Para criar um roteador, você pode importar o componente BrowserRouter do React Router DOM e renderizá-lo no componente principal de sua aplicação, como o componente App.

import { BrowserRouter } from 'react-router-dom';
 
function App() {
 return (
   <BrowserRouter>
	 {/* Componentes de rotas aqui */}
   </BrowserRouter>
 );
}

3. Criação de rotas §

Para criar rotas, você pode importar os componentes Routes e Route do React Router DOM e usá-los dentro do componente BrowserRouter.

import { Route, Switch } from 'react-router-dom';
 
function App() {
 return (
   <BrowserRouter>
	 <Routes>
	   <Route path="/" element={<Home />} />
	   <Route path="/about" component={<About />} />
	 </Routes>
   </BrowserRouter>
 );
}

Neste exemplo, a rota para a página inicial do seu aplicativo será renderizada quando a URL for a página inicial, e a rota para a página “About” será renderizada quando a URL for /about.

4. Criação de componentes de rota §

Para renderizar componentes específicos para cada rota, você pode criar componentes de rota e importá-los no componente Route. Por exemplo:

import Home from './components/Home';
import About from './components/About';
 
function App() {
 return (
   <BrowserRouter>
	 <Routes>
	   <Route path="/" element={<Home />} />
	   <Route path="/about" component={<About />} />
	 </Routes>
   </BrowserRouter>
 );
}

Neste exemplo, o componente Home será renderizado quando a rota for a página inicial, e o componente About será renderizado quando a rota for /about.

5. Criação de navegação §

Para criar navegação entre as rotas, você pode usar o componente Link do React Router DOM.

import { Link } from 'react-router-dom';
 
function Navbar() {
 return (
   <nav>
	 <ul>
	   <li>
		 <Link to="/">Home</Link>
	   </li>
	   <li>
		 <Link to="/about">About</Link>
	   </li>
	 </ul>
   </nav>
 );
}

Neste exemplo, os links para as páginas inicial e “About” serão renderizados no componente Navbar.

Nota

Existem algumas diferenças em relação a tag <a> do HTML com o componente Link do React Router DOM. Veja essas diferenças na anotação ”Diferença entre o component Link e a tag A”

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado