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 componente Route 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!