Router

La aplicación Create React no incluye enrutamiento de páginas.

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

Agregar enrutador React

Para agregar React Router a su aplicación, ejecute esto en la terminal desde el directorio raíz de la aplicación:

npm i -D react-router-dom

Nota: Este tutorial utiliza React Router v6.

Si está actualizando desde la versión v5, deberá utilizar el indicador @latest:

npm i -D react-router-dom@latest

kji

Estructura de carpetas

Para crear una aplicación con múltiples rutas de página, comencemos primero con la estructura de archivos. Dentro de la srccarpeta, crearemos una carpeta llamada 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 utilizaremos nuestro Router en nuestro index.jsarchivo.

EjemploConsigue tu propio servidor React.js

Utilice React Router para enrutar páginas según la URL:

import ReactDOM from "react-dom/client";
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>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Ejemplo explicado

Primero envolvemos nuestro contenido con <BrowserRouter>.

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

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

Los s anidados <Route>heredan y se suman a la ruta principal. Por lo tanto, la blogsruta se combina con la principal y se convierte en /blogs.

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

Al configurar el pathto, *funcionará como un contenedor para todas las URL no definidas. Esto es ideal para una página de error 404.

Páginas / Componentes

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

Muestra <Outlet>la ruta actual seleccionada.

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

Cada vez que nos vinculamos 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;

jkkj

Home.js:

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

export default Home;

Blogs.js:

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

export default Blogs;

Contact.js:

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

export default Contact;

NoPage.js:

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

export default NoPage;

kd