Implementação de navegação entre páginas

No tópico anterior, aprendemos sobre validação de entrada de dados em formulários.

Hoje, vamos aprender sobre como implementar navegação entre páginas no React usando o React Router.

O que é o React Router?

O React Router é uma biblioteca que facilita a implementação de navegação entre páginas em aplicações React.

Com o React Router, podemos:

• Criar links para navegar entre diferentes páginas.
• Definir rotas para diferentes páginas.
• Controlar o fluxo de navegação na aplicação.

Como usar o React Router?

Para usar o React Router, precisamos seguir estes passos:

1. Instalar o React Router:

npm install react-router-dom

2. Importar o React Router:

JavaScript

import { BrowserRouter, Route, Link } from "react-router-dom";

3. Criar um componente BrowserRouter:

const App = () => {
  return (
    <BrowserRouter>
      <div>
        <Header />
        <Main />
        <Footer />
      </div>
    </BrowserRouter>
  );
};

4. Criar rotas para diferentes páginas:

const App = () => {
  return (
    <BrowserRouter>
      <div>
        <Header />
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Footer />
      </div>
    </BrowserRouter>
  );
};

5. Criar links para navegar entre diferentes páginas:

const Home = () => {
  return (
    <div>
      <h1>Página inicial</h1>
      <Link to="/about">Sobre</Link>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>Página sobre</h1>
      <Link to="/">Home</Link>
    </div>
  );
};

Exemplo de navegação entre páginas

Vamos ver um exemplo de como implementar navegação entre páginas usando o React Router:

const App = () => {
  return (
    <BrowserRouter>
      <div>
        <Header />
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Footer />
      </div>
    </BrowserRouter>
  );
};

const Home = () => {
  return (
    <div>
      <h1>Página inicial</h1>
      <Link to="/about">Sobre</Link>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>Página sobre</h1>
      <Link to="/">Home</Link>
    </div>
  );
};

Neste exemplo, o componente App usa o componente BrowserRouter para criar um contexto de navegação.

O componente App define duas rotas: uma para a página inicial (/) e outra para a página sobre (/about).

O componente Home usa o componente Link para criar um link para a página sobre.

O componente About usa o componente Link para criar um link para a página inicial.

Observações importantes

Ao implementar navegação entre páginas, é importante:

• Usar nomes de rotas descritivos: Os nomes das rotas devem ser descritivos para que o usuário entenda para qual página ele está navegando.
• Usar links com significado: Os links devem ter um significado claro para o usuário.
• Tratar erros de navegação: É importante tratar erros de navegação, como tentar acessar uma página que não existe.