Rotas e navegação com react-router-dom

No tutorial de hoje, vamos aprender como criar rotas usando React e a biblioteca react-router-dom.

Passo 1: Instalar o react-router-dom

Primeiramente, é necessário instalar o react-router-dom no seu projeto React. Você pode fazer isso utilizando o npm ou yarn:

npm install react-router-dom
yarn add react-router-dom

Passo 2: Configurar as rotas

Após instalar o react-router-dom, é preciso configurar as rotas da sua aplicação. Você pode fazer isso no arquivo onde está sendo renderizado o seu aplicativo, geralmente no App.js.


import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

export default App;


Passo 3: Criar os componentes das rotas

Agora, crie os componentes para as rotas definidas no passo anterior. Por exemplo, crie um componente Home.js e um componente About.js.

Passo 4: Navegar entre as rotas

Por fim, você pode navegar entre as rotas da sua aplicação utilizando os componentes Link e NavLink do react-router-dom.


import React from 'react';
import { Link } from 'react-router-dom';

export default App;


Conclusão

Com esses passos simples, você já pode criar rotas e navegar entre páginas em sua aplicação React utilizando o react-router-dom. Aproveite esse poderoso recurso para melhorar a experiência do usuário na sua aplicação!