Reaccionar enrutador

Create React App no ​​incluye el enrutamiento de páginas.

React Router es la solución más popular.

Agregar enrutador React

Para agregar React Router en su aplicación, ejecútelo en la terminal desde el directorio raíz de la aplicación:

Estructura de carpetas

Para crear una aplicación con varias rutas de página, primero comencemos con la estructura del archivo.

Dentro de la srccarpeta, crearemos una carpeta nombrada pagescon varios archivos:

src\pages\:

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

Cada archivo contendrá un componente React muy básico.

Uso básico

Ahora usaremos nuestro Router en nuestro index.jsarchivo.

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"));

Ejemplo explicado

Envolvemos nuestro contenido primero con <BrowserRouter>.

Luego definimos nuestro <Routes>. Una aplicación puede tener múltiples <Routes>. Nuestro ejemplo básico solo usa uno.

<Route>s se pueden anidar. El primero <Route>tiene una ruta / y representa el Layoutcomponente.

Los s anidados <Route>heredan y se agregan a la ruta principal. Entonces la blogsruta se combina con el padre y se convierte en /blogs.

La Homeruta del componente no tiene una ruta pero tiene un indexatributo. Eso especifica esta ruta como la ruta predeterminada para la ruta principal, que es /.

Establecer el pathto *actuará como un cajón de sastre para cualquier URL indefinida. Esto es genial para una página de error 404.

Páginas / Componentes

El Layoutcomponente tiene <Outlet>y <Link>elementos.

El <Outlet>renderiza la ruta actual seleccionada.

<Link> se utiliza para establecer la URL y realizar un seguimiento del historial de navegación.

Cada vez que nos vinculemos a una ruta interna, usaremos <Link> en lugar de <a href="">.

La "ruta de diseño" es un componente compartido que inserta contenido común en todas las páginas, como un menú de navegación.

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;