React Router

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

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

Agregar enrutador reaccionar

Para agregar React Router en 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 5, deberá utilizar la marca @latest:

npm i -D react-router-dom@latest

Estructura de carpetas

Para crear una aplicación con múltiples rutas de páginas, 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 enrutador en nuestro index.jsarchivo.

Utilice React Router para enrutar a 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>s se pueden anidar. El primero <Route>tiene una ruta / y representa el Layoutcomponente.

Los s anidados <Route>heredan y agregan a la ruta principal. Entonces la blogsruta se combina con la ruta principal 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 /.

Configurar el patha *actuará como un comodín para cualquier URL no definida. Esto es genial para una página de error 404.

Páginas / Componentes

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

Representa <Outlet>la ruta actual seleccionada.

<Link>se utiliza para configurar 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.


Layout.js:
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;

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;

Comentarios

Publicar un comentario

Entradas populares de este blog

API Web Crypto,

 I have digital signature certificates efirma de sat mexico. I want an app to load the .key certificate and convert it to pem format. Once you convert it, display it in a textarea using the Web Crypto API. Tengo certificados de firma digital efirma de sat mexico. Quiero una aplicación que cargue el certificado .key y lo convierta a formato pem. Una vez que lo convierta, lo muestre en un área de texto utilizando la API Web Crypto. ChatGPT Plus ChatGPT To convert a .key certificate to PEM format using the Web Crypto API, you can use the following steps: Load the .key certificate file using the FileReader API. Here's an example code snippet to achieve that: javascript Copiar código const fileInput = document . querySelector ( 'input[type="file"]' ); const reader = new FileReader (); reader. onload = () => { const keyData = reader. result ; // Code to convert the key data to PEM format }; reader. readAsText (fileInput. files [ 0 ]); Convert the key dat...
Leer más

React Events

 Reaccionar eventos Al igual que los eventos HTML DOM, React puede realizar acciones basadas en eventos del usuario.React tiene los mismos eventos que HTML: hacer clic, cambiar, pasar el mouse, etc. Agregar eventos Los eventos de React están escritos en la sintaxis de camelCase: onClick en lugar de onclick . Los controladores de eventos de React están escritos entre llaves: onClick={shoot} en lugar de onclick="shoot()" . React: <button onClick={shoot}>Take the Shot!</button> Html: <button onclick="shoot()">Take the Shot!</button> Coloque la shootfunción dentro del Footballcomponente: function Football() {   const shoot = () => {     alert("Great Shot!");   }   return (     <button onClick={shoot}>Take the shot!</button>   ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Football />); Pasar argumentos Para pasar un argumento a un controlador de eventos, use una...
Leer más

firmas digitales integradas en PDFs

 Para las firmas digitales integradas en PDFs, el proceso es un poco diferente al de simplemente manejar archivos y firmas por separado. Aquí te explico en detalle cómo se realiza y cómo el receptor obtiene la clave pública del firmante. Funcionamiento de las Firmas Digitales Integradas en PDFs Firmante : El firmante utiliza un software que soporta firmas digitales en PDF (como Adobe Acrobat, por ejemplo) para firmar el documento PDF. Este software inserta la firma digital en el PDF y también incluye el certificado digital del firmante dentro del archivo PDF. Receptor : El receptor abre el documento PDF utilizando un software compatible con firmas digitales (Adobe Acrobat Reader, por ejemplo). Este software extrae la firma digital y el certificado digital del firmante del PDF. Pasos Detallados Firma del Documento PDF : El documento PDF es firmado utilizando la clave privada del firmante. Se genera un hash del contenido del PDF. El hash es cifrado utilizando la clave privada del fir...
Leer más