React Router

React Router é uma biblioteca de roteamento para o React, que permite criar aplicativos de página única (SPAs) com vários componentes que respondem às alterações de URL. O React Router é um pacote separado do React, mas é amplamente utilizado na comunidade React para gerenciar a navegação em aplicativos da web.

O React Router fornece componentes de roteamento que podem ser renderizados em qualquer lugar na árvore de componentes do React. Esses componentes incluem:

<BrowserRouter>: usa a API de histórico do navegador HTML5 para sincronizar o estado da sua aplicação com a URL.

<HashRouter>: usa a URL hash para sincronizar o estado da sua aplicação com a URL.

<Switch>: renderiza o primeiro filho <Route> ou <Redirect> que corresponde ao local atual da URL.

<Route>: renderiza um componente se o local atual da URL corresponder ao caminho especificado.

<Link>: cria um link clicável para navegar para um determinado local da URL.

<Redirect>: redireciona para uma rota especificada.

Aqui está um exemplo básico de como usar o React Router:

  import React from 'react';
  import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
  
  function Home() {
    return <h1>Welcome to the Home page</h1>;
  }
  
  function About() {
    return <h1>About Us</h1>;
  }
  
  function App() {
    return (
      <Router>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>
  
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Router>
    );
  }

Neste exemplo, definimos duas páginas, a página inicial (Home) e a página Sobre (About). Usando o <Link> componente, podemos criar links clicáveis ​​para cada página. Usando o <Route> componente, podemos especificar qual componente deve ser renderizado quando a URL corresponder a um determinado caminho. O <BrowserRouter> envolve todos esses componentes, permitindo que a aplicação seja atualizada quando a URL mudar.