Uso do React Router para controle de rotas
No tópico anterior, aprendemos sobre como implementar navegação entre páginas usando o React Router.
Hoje, vamos aprender sobre como usar o React Router para controle de rotas.
O que é controle de rotas?
Controle de rotas é a capacidade de definir quais páginas da aplicação são acessíveis e em qual ordem elas podem ser acessadas.
Com o React Router, podemos:
- Definir rotas dinâmicas: As rotas podem ser definidas de forma dinâmica, com base em parâmetros de URL.
- Usar parâmetros de rota: Podemos usar parâmetros de rota para passar informações para diferentes páginas.
- Redirecionar o usuário para diferentes páginas: Podemos redirecionar o usuário para diferentes páginas, de acordo com a sua navegação.
Como usar o React Router para controle de rotas?
Para usar o React Router para controle de rotas, podemos usar os seguintes recursos:
- Componentes
Route
: O componenteRoute
define uma rota para uma página específica. - Parâmetros de rota: Podemos usar parâmetros de rota para passar informações para diferentes páginas.
- Redirecionamentos: Podemos usar o componente
Redirect
para redirecionar o usuário para diferentes páginas.
Exemplo de uso do React Router para controle de rotas
Vamos ver um exemplo de como usar o React Router para controle de rotas:
const App = () => { return ( <BrowserRouter> <div> <Header /> <Route path="/" exact component={Home} /> <Route path="/about/:id" component={About} /> <Footer /> </div> </BrowserRouter> ); }; const Home = () => { return ( <div> <h1>Página inicial</h1> <Link to="/about/1">Sobre o produto 1</Link> <Link to="/about/2">Sobre o produto 2</Link> </div> ); }; const About = ({ match }) => { const productId = match.params.id; return ( <div> <h1>Página sobre o produto {productId}</h1> </div> ); };
Neste exemplo, o componente App
define duas rotas:
- Uma rota para a página inicial (
/
). - Uma rota para a página sobre (
/about/:id
).
A rota para a página sobre é dinâmica e usa um parâmetro de rota (id
).
O componente Home
usa o componente Link
para criar links para a página sobre, passando o id do produto como parâmetro.
O componente About
usa o objeto match
para acessar o id do produto passado como parâmetro de rota.
Observações importantes
Ao usar o React Router para controle de rotas, é importante:
- Definir rotas com cuidado: As rotas devem ser definidas com cuidado para evitar erros de navegação.
- Usar parâmetros de rota de forma segura: Os parâmetros de rota devem ser validados para evitar ataques de segurança.
- Tratar erros de roteamento: É importante tratar erros de roteamento, como tentar acessar uma página que não existe.
Gancho para o próximo módulo
No próximo módulo, vamos aprender sobre otimização com React Memo.
Vamos aprender como usar o React Memo para otimizar o desempenho da nossa aplicação.
Espero que vocês estejam animados para aprender mais sobre otimização com React Memo!