Reagir Roteador

Create React App não inclui roteamento de página.

React Router é a solução mais popular.

Adicionar roteador React

Para adicionar o React Router em seu aplicativo, execute-o no terminal a partir do diretório raiz do aplicativo:

Estrutura de pastas

Para criar um aplicativo com rotas de várias páginas, vamos primeiro começar com a estrutura do arquivo.

Dentro da srcpasta, criaremos uma pasta nomeada pagescom vários arquivos:

src\pages\:

• Layout.js
• Home.js
• Blogs.js
• Contact.js
• NoPage.js

Cada arquivo conterá um componente React muito básico.

Uso básico

Agora vamos usar nosso roteador em nosso index.jsarquivo.

import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Exemplo explicado

Envolvemos nosso conteúdo primeiro com <BrowserRouter>.

Então definimos nosso <Routes>. Um aplicativo pode ter vários arquivos <Routes>. Nosso exemplo básico usa apenas um.

<Route>s pode ser aninhado. O primeiro <Route>tem um caminho / e renderiza o Layoutcomponente.

Os s aninhados <Route>herdam e adicionam à rota pai. Assim, o blogscaminho é combinado com o pai e se torna /blogs.

A Homerota do componente não tem um caminho, mas tem um indexatributo. Isso especifica essa rota como a rota padrão para a rota pai, que é /.

Definir o pathpara *atuará como um catch-all para quaisquer URLs indefinidos. Isso é ótimo para uma página de erro 404.

Páginas / Componentes

O Layoutcomponente tem <Outlet>e <Link>elementos.

O <Outlet>renderiza a rota atual selecionada.

<Link>é usado para definir o URL e acompanhar o histórico de navegação.

Sempre que vincularmos a um caminho interno, usaremos <Link> em vez de <a href="">.

A "rota de layout" é um componente compartilhado que insere conteúdo comum em todas as páginas, como um menu de navegação.

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

const Layout = () => {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Outlet />
    </>
  )
};

export default Layout;

const Home = () => {
  return <h1>Home</h1>;
};

export default Home;

const Blogs = () => {
  return <h1>Blog Articles</h1>;
};

export default Blogs;

const Contact = () => {
  return <h1>Contact Me</h1>;
};

export default Contact;

const NoPage = () => {
  return <h1>404</h1>;
};

export default NoPage;