ReactJS | enrutador

React Router es una biblioteca estándar para el enrutamiento en React. Permite la navegación entre vistas de varios componentes en una aplicación React, permite cambiar la URL del navegador y mantiene la interfaz de usuario sincronizada con la URL.
Vamos a crear una aplicación simple para React para comprender cómo funciona React Router. La aplicación contendrá tres componentes: componente de inicio, sobre un componente y componente de contacto. Usaremos React Router para navegar entre estos componentes.

Configuración de la aplicación React: Cree una aplicación React usando create-react-app y llamémosla geeks .

Nota: si ya instaló create-react-app globalmente a través de npm, use directamente el siguiente comando:

Geeks de npx create-react-app

Your development environment is ready. Let us now install React Router in our Application.

Instalación de React Router: React Router se puede instalar a través de npm en su aplicación React. Siga los pasos que se indican a continuación para instalar el enrutador en su aplicación React:

• Paso 1: cd en el directorio de su proyecto, es decir, geeks .
• Paso 2: para instalar React Router, use el siguiente comando:

npm install – -save reaccionar-router-dom

After installing react-router-dom, add its components to your React application.

Adición de componentes de React Router: Los componentes principales de React Router son:

• BrowserRouter: BrowserRouter es una implementación de enrutador que utiliza la API de historial de HTML5 (pushState, replaceState y el evento popstate) para mantener su interfaz de usuario sincronizada con la URL. Es el componente principal que se utiliza para almacenar todos los demás componentes.
• Rutas: Es un nuevo componente introducido en la v6 y una actualización de lacomponente. Las principales ventajas de Routes sobre Switch son:
  • Parientes y s
  • Las rutas se eligen en función de la mejor coincidencia en lugar de ser recorridas en orden.

• Ruta: la ruta es el componente que se muestra condicionalmente y que representa alguna interfaz de usuario cuando su ruta coincide con la URL actual.
• Enlace: el componente de enlace se utiliza para crear enlaces a diferentes rutas e implementar la navegación por la aplicación. Funciona como una etiqueta de anclaje HTML .

Para agregar componentes de React Router en su aplicación, abra el directorio de su proyecto en el editor que usa y vaya al archivo app.js. Ahora, agregue el siguiente código en app.js.

import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
} from 'react-router-dom';

Nota: BrowserRouter tiene un alias de enrutador.

Usando React Router: Para usar React Router, primero creemos algunos componentes en la aplicación de reacción. En el directorio de su proyecto, cree una carpeta llamada componente dentro de la carpeta src y ahora agregue 3 archivos llamados home.js , about.js y contact.js a la carpeta del componente.

Agreguemos algo de código a nuestros 3 componentes:

• Inicio.js:

  import React from 'react';   function Home(){     return <h1>Welcome to the world of Geeks!</h1> }   export default Home;

• Acerca de.js:

  import React from 'react';   function About() {     return <div>         <h2>GeeksforGeeks is a computer science portal for geeks!</h2>           Read more about us at :         <a href="https://www.geeksforgeeks.org/about/">             https://www.geeksforgeeks.org/about/         </a>     </div> } export default About;

• Contacto.js:

  import React from 'react';   function Contact(){  return <address>             You can find us here:<br />             GeeksforGeeks<br />             5th & 6th Floor, Royal Kapsons, A- 118, <br />             Sector- 136, Noida, Uttar Pradesh (201305)         </address> }   export default Contact;

Ahora, incluyamos los componentes de React Router en la aplicación:

• BrowserRouter: agregue el alias de BrowserRouter como enrutador a su archivo app.js para envolver todos los demás componentes. BrowserRouter es un componente padre y solo puede tener un hijo.

  class App extends Component {   render() {     return (        <Router>            <div className="App">            </div>        </Router>    );   } }

• Enlace: Ahora vamos a crear enlaces a nuestros componentes. El componente de enlace usa to prop para describir la ubicación a la que deben navegar los enlaces.

  <div className="App">     <ul>       <li>         <Link to="/">Home</Link>       </li>       <li>         <Link to="/about">About Us</Link>       </li>       <li>         <Link to="/contact">Contact Us</Link>       </li>     </ul> </div>

  Ahora, ejecute su aplicación en el host local y haga clic en los enlaces que creó. Notará que la URL cambia según el valor de los accesorios del componente Enlace.
  

• Ruta: el componente de ruta ahora nos ayudará a establecer el vínculo entre la interfaz de usuario del componente y la URL. Para incluir rutas a la aplicación, agregue el código que figura a continuación en su app.js.

  <Route exact path='/' element={< Home />}></Route> <Route exact path='/about' element={< About />}></Route> <Route exact path='/contact' element={< Contact />}></Route>

  Los componentes están vinculados ahora y al hacer clic en cualquier vínculo se representará el componente asociado con él.
  
  Tratemos ahora de comprender los accesorios asociados con el componente Ruta.

  • 1.exacta: Se utiliza para hacer coincidir el valor exacto con la URL. Por ejemplo, la ruta exacta = ‘/acerca de’ solo representará el componente si coincide exactamente con la ruta, pero si eliminamos exacta de la sintaxis, la interfaz de usuario aún se representará incluso si la estructura es como /acerca de/10.
    
  • 2. ruta: ruta especifica un nombre de ruta que asignamos a nuestro componente.
  • 3. elemento: se refiere al componente que se renderizará al coincidir con la ruta.

  Nota: De forma predeterminada, las rutas son inclusivas, lo que significa que más de un componente de ruta puede coincidir con la ruta de la URL y mostrarse al mismo tiempo. Si queremos renderizar un solo componente, necesitamos usar rutas .

• Rutas: para renderizar un solo componente, envuelva todas las rutas dentro del componente de rutas.

  <Routes>     <Route exact path='/' element={< Home />}></Route>     <Route exact path='/about' element={< About />}></Route>     <Route exact path='/contact' element={< Contact />}></Route> </Routes>

  Switch agrupa varias rutas, itera sobre ellas y encuentra la primera que coincide con la ruta. De este modo, se representa el componente correspondiente a la ruta.

Después de agregar todos los componentes, aquí está nuestro código fuente completo:

import React, { Component } from 'react';
import { BrowserRouter as Router,Routes, Route, Link } from 'react-router-dom';
import Home from './component/home';
import About from './component/about';
import Contact from './component/contact';
import './App.css';
 
class App extends Component {
  render() {
    return (
       <Router>
           <div className="App">
            <ul className="App-header">
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About Us</Link>
              </li>
              <li>
                <Link to="/contact">Contact Us</Link>
              </li>
            </ul>
           <Routes>
                 <Route exact path='/' element={< Home />}></Route>
                 <Route exact path='/about' element={< About />}></Route>
                 <Route exact path='/contact' element={< Contact />}></Route>
          </Routes>
          </div>
       </Router>
   );
  }
}
 
export default App;

Ahora, puede hacer clic en los enlaces y navegar a diferentes componentes. React Router mantiene la interfaz de usuario de su aplicación sincronizada con la URL.



Finalmente, hemos implementado con éxito la navegación en nuestra aplicación React utilizando React Router.