Post Top Ad

Your Ad Spot

jueves, 15 de octubre de 2020

Tutorial de React Router 5/4 [2020] con ejemplos

 En este tutorial, lo ayudaremos a comenzar con react-router-dom ( React Router 5 ) en 2020 utilizando una aplicación React de ejemplo que le muestra cómo usar diferentes conceptos como Link y NavLink para crear enlaces (en lugar de anclas) en el React way, Switch y exact para habilitar el enrutamiento exclusivo y el historial de enrutamiento del navegador .

veamos cómo usar React Router 5/4 para agregar enrutamiento del lado del cliente a nuestra aplicación.

¿Qué es el React Router 5?

React Router 5.1 es la última versión de la biblioteca de enrutamiento oficial para React. Al crear aplicaciones de una sola página o SPA, necesita el enrutamiento del lado del cliente para poder navegar a través de la interfaz de usuario de su aplicación React, que generalmente contiene varias páginas o vistas.

React Router 5 le permite mantener la interfaz de usuario de su aplicación y la URL sincronizadas, por lo que en este tutorial le enseñaremos cómo usar React Router 5 y lo que puede lograr con el enfoque de enrutamiento declarativo.

Reaccionar enrutador 5

Introducción a React Router 5

Quizás la forma más adecuada de ver cómo funciona React Router v5 / 4 es escribiendo una aplicación React simple de varias páginas utilizando los nuevos conceptos de enrutador. Nuestra aplicación de ejemplo tendrá rutas a casa, acerca de, contacto, inicio de sesión, registro y componentes / páginas de perfil. Pero primero, hagamos un recorrido por los conceptos de React Router v5 / 4 y en qué se diferencian de React Router v3.

React Router v5 vs React Router v3

Antes de la v5, existía React Router v3 , React Router v5 es una reescritura completa, entonces, ¿cuál es la diferencia entre estos dos enrutadores React? aquí hay una lista resumida de la mayoría de las diferencias:

  • Con React router v5 , el enrutamiento ya no está centralizado, sino que se convierte en parte del resto del diseño de la aplicación y la interfaz de usuario.
  • Los componentes de enrutamiento específicos del navegador viven en react-router-dom en lugar de react-router, por lo que las importaciones deben cambiarse para que sean del paquete react-router-dom .
  • Presentamos nuevos componentes como BrowserRouter y HashRouter para casos de uso específicos (ver más abajo).
  • No más uso de {props.children} para anidar componentes en v5 React Router.
  • Las reglas de enrutamiento de React Router v3 eran exclusivas, lo que significa que solo se coincidirá con una ruta a la vez. Para v5, las reglas de enrutamiento son inclusivas, lo que significa que se pueden hacer coincidir varias rutas y luego representarlas.

React-router-dom es la versión de React Router v5 diseñada para aplicaciones web, React Router v5 se dividió en tres paquetes:

  • react-router : componentes centrales comunes entre dom y versiones nativas.
  • react-router-dom : la versión dom diseñada para navegadores o aplicaciones web.
  • react-router-native : la versión nativa diseñada para aplicaciones móviles react-native.

react-router vs react-router-dom vs react-router-native

react-router aloja los componentes centrales para el enrutamiento de las aplicaciones React, react-router-dom proporciona componentes específicos del navegador para enrutar aplicaciones web y react-router-native proporciona componentes específicos para aplicaciones react-native o móviles creadas con React Native. Por lo tanto, debe instalar react-router-dom o react-router-native, ya que ambos exportan sus componentes de entornos correspondientes más lo que exporta react-router .

Instalación de React Router 5

Dado que estamos creando una aplicación web, no una aplicación móvil nativa, necesitamos instalar el paquete react-router-dom , por lo que dentro de su proyecto React ejecute el siguiente comando usando su terminal (Linux o MAC) o el símbolo del sistema (Windows):

npm install --save react-router-dom

Comprensión y uso de los enrutadores React Router 5 (BrowserRouter vs HashRouter)

  • BrowserRouter: esta es una subclase o una implementación concreta de la interfaz del enrutador que hace uso de la API de historial HTML5 para sincronizar su interfaz de usuario con la URL del navegador actual o en realidad la ruta de la URL, es decir, window.location.
  • HashRouter: Al igual que el enrutador anterior, pero solo usa la parte hash de la URL, es decir, window.location.hash.
  • MemoryRouter
  • NativeRouter: se utiliza para el enrutamiento dentro de aplicaciones móviles nativas de reacción.
  • StaticRouter: se utiliza para enrutamiento estático al igual que React Router v3.

BrowserRouter vs HashRouter

Hay muchos tipos de componentes de enrutador, entre ellos <BrowserRouter> y <HashRouter> para las aplicaciones React del lado del cliente. Si está usando un servidor dinámico que puede manejar URL dinámicas, entonces necesita usar el componente BrowserRouter , pero si está usando un servidor que solo sirve archivos estáticos, entonces un componente HashRouter es lo que se debe usar en este caso.

Comprensión y uso de las rutas de React Router 5

El componente <Ruta> es uno de los componentes más útiles de React Router v5 y la idea detrás de él es simple, donde quiera que desee renderizar algo cuando solo hay una coincidencia con la ruta de la ubicación, puede usar un componente Ruta.

El componente de ruta tiene muchas propiedades como:

  • Propiedad de ruta: de tipo cadena, contiene el nombre de la ruta que se va a comparar.
  • propiedad del componente: contiene el nombre del componente a representar si hay una coincidencia.
  • propiedad exacta: esta propiedad le dice a la ruta que coincida exactamente con la ruta (ver enrutamiento inclusivo y exclusivo)
  • Propiedad estricta: esta propiedad le dice a Route que coincida solo con una ruta que tenga una barra diagonal.

Hay otras dos propiedades que pueden reemplazar la propiedad del componente para decirle al componente de Ruta qué necesita representar cuando hay una coincidencia:

  • render propiedad: una función que devuelve un elemento React. Más útil para renderizado en línea o para envolver componentes renderizados.
  • children: también una función que genera un elemento React. Excepto que este siempre se renderizará incluso si no hay coincidencia de ruta.

La mayoría de las veces, usará la propiedad del componente, pero también hay muchas situaciones en las que tendrá que usar propiedades de procesamiento o secundarias. Se pasarán tres métodos estos tres apoyos:

  • partido
  • ubicación
  • historia

Por ejemplo:

Usando componente:

<Route exact path="/" component={HomePage} />

Representará el HomePagecomponente cuando la ruta de ubicación del navegador coincida exactamente /.

Usando render:

Para renderizado en línea:

<Route path="/home" render={() => <div>Home</div>}/>

Para envolver:

const FadingRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    <FadeIn>
      <Component {...props}/>
    </FadeIn>
  )}/>
)

<FadingRoute path="/cool" component={Something}/>

Usando niños:

<ul>
  <ListItemLink to="/somewhere"/>
  <ListItemLink to="/somewhere-else"/>
</ul>

const ListItemLink = ({ to, ...rest }) => (
  <Route path={to} children={({ match }) => (
    <li className={match ? 'active' : ''}>
      <Link to={to} {...rest}/>
    </li>
  )}/>
)

Para obtener más información sobre cómo React Router v5 coincide con las rutas, consulte path-to-regexp el módulo utilizado para las rutas coincidentes.

Comprensión de los parámetros de URL / ruta / ruta de React Router 5

Por lo general, hay partes variables del nombre de ruta que se utilizan para pasar información entre diferentes rutas de una aplicación, entonces, ¿cómo capturamos estas variables y las pasamos a los componentes? Podemos simplemente agregar el nombre que se usará para la variable más dos puntos : al final de la ruta de la ruta, por ejemplo:

<Route path="/:param1" component={Home}/>
const Home = ({ match }) => (
  <div>
    <h1> Parameter 1 : {match.params.param1}</h1>
  </div>
)    

Cuando haya una ruta que coincida, se creará un objeto que tenga las siguientes propiedades y se pasará al componente:

  • url: la parte coincidente de la URL.
  • camino: simplemente el camino.
  • isExact: es igual a True si la ruta es exactamente igual al nombre de ruta de la ubicación actual.
  • params: un objeto que contiene parámetros de URL.

Comprensión y uso de enlaces en React Router 5

Los enlaces son componentes de React Router v5 diseñados como un reemplazo de enlaces de anclaje para crear elementos de navegación que permiten a los usuarios navegar entre diferentes páginas de redes de aplicaciones React. A diferencia de los anclajes, que recargan toda la página, los enlaces solo recargan la (s) parte (s) de la interfaz de usuario que coinciden con la ruta de ubicación del navegador.

Un Enlace componente toma una a la propiedad que dice Reaccionar Router el destino para la navegación. Por ejemplo:

import { Link } from 'react-router-dom'
const Nav = () => (
    <Link to='/'>Home</Link>
)

Al hacer clic nos llevará a la ubicación con ruta: /

la a prop cualquiera de ellos puede tener una cadena o una ubicación (nombre de ruta, hachís, búsqueda, y estado ) objeto, por ejemplo:

<Link to={ {
  pathname: '/me',
  search: '?sort=asc',
  hash: '#hash',
  state: { fromHome: true }
} } />

El enlace también puede tener otra propiedad: reemplazar si es Verdadero , cuando se haga clic en la entrada del enlace se reemplazará en el historial.

React Router 5 Link frente a NavLink

NavLink es una subclase de Link que agrega información de estilo a los elementos renderizados, por ejemplo:

import { NavLink } from 'react-router-dom'

<NavLink
  to="/me"
  activeStyle=
   activeClassName="selected">My Profile</NavLink>

Escribiendo nuestro primer ejemplo con React Router DOM

Ahora, escriba una aplicación React de ejemplo que le muestre cómo usar BrowserRouter para implementar el enrutamiento.

Primero importamos los componentes de enrutamiento necesarios como Route y BrowserRouter

import { BrowserRouter } from 'react-router-dom'
import { Route } from 'react-router-dom'

A continuación, creamos el componente de diseño base, además de las etiquetas HTML comunes, también usamos los componentes de React Router v5 Link y Route :

const BaseLayout = () => (
  <div className="base">
    <header>
      <p>React Router v5 Browser Example</p>
        <nav>
          <ul>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/about'>About</Link></li>
            <li><Link to='/me'>Profile</Link></li>
            <li><Link to='/login'>Login</Link></li>
            <li><Link to='/register'>Register</Link></li>
            <li><Link to='/contact'>Contact</Link></li>

          </ul>
        </nav>
    </header>
    <div className="container">
      <Route path="/" exact component={HomePage} />
      <Route path="/about" component={AboutPage} />
      <Route path="/contact" component={ContactPage} />
      <Route path="/login" component={LoginPage} />
      <Route path="/register" component="{RegisterPage}" />
      <Route path="/me" component={ProfilePage} />
    </div>
    <footer>
        React Router v5 Browser Example (c) 2017
    </footer>
  </div>
)

A continuación creamos nuestras páginas:

const HomePage = () => <div>This is a Home Page</div>
const LoginPage = () => <div>This is a Login Page</div>
const RegisterPage = () => <div>This is a Register Page</div>
const ProfilePage = () => <div>This is the Profile Page</div>
const AboutPage = () => <div>This is an About Page</div>
const ContactPage = () => <div>This is a Contact Page</div>

Y finalmente creamos el componente de la aplicación, el componente BrowserRouter para contener nuestro componente de diseño base y luego renderizar la aplicación.

const App = () => (
  <BrowserRouter>
    <BaseLayout />
  </BrowserRouter>
)
render(<App />, document.getElementById('root'))

Como puede ver, es muy fácil usar los componentes React Router v5 para crear aplicaciones con enrutamiento.

Comprensión del enrutamiento inclusivo de React Router 5

En nuestra aplicación de ejemplo, usamos el accesorio exacto en la ruta para el componente HomePage

<Route path="/" exact component={HomePage} />

Esto se debe a que React Router v5 usa enrutamiento inclusivo en lugar del enrutamiento exclusivo utilizado por React Router v3, por lo que sin la propiedad exacta, el componente de inicio se renderizará con todos los demás componentes, por ejemplo, cuando el usuario visita la /loginruta, ambas /y las /loginrutas coincidirán y sus componentes correspondientes LoginPageHomePageserá renderizado. Pero ese no es el comportamiento que estamos buscando, es por eso que necesitamos agregar el accesorio exacto que le dice al componente Ruta que coincida exactamente con la /ruta.

Vea cómo establecer el estado y usar la API de contexto en React .

Ahora veamos cómo podemos usar el enrutamiento inclusivo en nuestra ventaja, supongamos que tenemos un componente de submenú que debe estar disponible solo cuando estamos en la página de perfil.Podemos cambiar fácilmente nuestro diseño básico para agregar este requisito:

const BaseLayout = () => (
  <div className="base">
    <header>
      <p>React Router v5 Browser Example</p>
        <nav>
          <ul>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/about'>About</Link></li>
            <li>
                <Link to='/me'>Profile</Link>
                <Route path="/me" component={ProfileMenu} />
            </li>
            ...
)

Entonces, como puede ver, todas las rutas con la ruta '/ me' se mostrarán cuando visitemos la ruta '/ me', no solo la primera coincidencia, es una ruta inclusiva .

Comprensión del enrutamiento exclusivo de React Router 5

El enrutamiento exclusivo es el inverso del enrutamiento inclusivo, era el enrutamiento predeterminado en React Router v3 donde solo se representa la primera coincidencia, entonces, ¿qué sucede si desea un enrutamiento exclusivo? eso también se puede hacer usando el enrutador v5 usando el componente Switch . En un componente Switch , solo se renderizará el primer hijo <Ruta> o <Redirigir> , que coincida con la ubicación. Por ejemplo:

import { Switch, Route } from 'react-router'    

<Switch>
  <Route exact path="/" component={HomePage}/>
  <Route path="/about" component={AboutPage}/>
  <Route path="/me" component={ProfilePage}/>
  <Route component={NotFound}/>
</Switch>

Historial del navegador React Router 5

React Router v5 proporciona un objeto de historial que expone una API simple con diferentes implementaciones (API de historial HTML5 para dom, historial de hash heredado para dom, historial en memoria para react-native) para administrar / manipular el historial del navegador.

También puede navegar dentro de su aplicación React usando métodos del objeto de historial , por ejemplo:

history.push("/my-path")
history.replace("/my-path")

Que son equivalentes a:

<Link to="/my-path"/>
<Redirect to="/my-path"/>

Cómo redireccionar con el componente Redirect

Siempre que desee redirigir a otra ubicación, puede colocar componente que es cuando rindió redirigirá a la ubicación especificada en a prop que puede ser una cadena o un objeto de ubicación, por ejemplo:

<Redirect to={ {
  pathname: '/register',
  search: '?utm=techiediaries',
  state: { referrer: techiediaries.com }
} }/>

O simplemente:

<Redirect to="/register"/>

Conclusión

React Router v5 facilita la creación de aplicaciones React con interfaces de usuario complejas que tienen enrutamiento entre diferentes partes, simplemente puede declarar un componente de enrutador como BrowserRouter o HashRouter y poner, dentro de eso, un montón de componentes secundarios de Route que tienen accesorios que indican la ruta que debe coincidir y el componente que se representará de manera inclusiva siempre que haya una coincidencia (es decir , se procesarán todas las rutas coincidentes ). En caso de que necesite hacer un renderizado exclusivo (al igual que React Router v3: es decir, solo se renderizará la primera ruta coincidente ), simplemente puede usar un Switchcomponente donde solo se representará un hijo (el primero que se encuentre). También puede pasar información diferente entre rutas utilizando parámetros que se pueden capturar y recuperar del objeto de coincidencia que se crea una vez que se establece una coincidencia y luego se pasa al componente renderizado actual. Finalmente, todos los bloques de construcción o componentes de React Router v5 diseñados para el enrutamiento de aplicaciones web están disponibles y se pueden importar desde react-router-dom .

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas