Introducción a React Router

React Router 4 es la herramienta perfecta para vincular la URL y su aplicación React. React Router es la biblioteca de enrutamiento React de facto, y es uno de los proyectos más populares construido sobre React.

Este tutorial presenta React Router 4, la última versión estable

React Router es la biblioteca de enrutamiento React de facto, y es uno de los proyectos más populares construido sobre React.

React en su esencia es una biblioteca muy simple y no dicta nada sobre el enrutamiento.

El enrutamiento en una aplicación de una sola página es la forma de introducir algunas funciones para navegar por la aplicación a través de enlaces, que sonprevistoen aplicaciones web normales:

El navegador debecambiar la URLcuando navega a una pantalla diferente
Enlace profundodebería funcionar: si apunta el navegador a una URL, la aplicación debería reconstruir la misma vista que se presentó cuando se generó la URL.
losbotón de retroceso (y avance) del navegadordebería funcionar como se esperaba.

Enrutar enlaces junto con la navegación de su aplicación con las funciones de navegación que ofrece el navegador.: laBarra de direccióny elbotones de navegacion.

React Router ofrece una forma de escribir su código para quemostrará ciertos componentes de su aplicación solo si la ruta coincide con lo que define.

Instalación

Connpm:

npm install react-router-dom

Tipos de rutas

React Router proporciona dos tipos diferentes de rutas:

BrowserRouter
HashRouter

Uno crea URL clásicas, el otro crea URL con el hash:

https://application.com/dashboard   /* BrowserRouter */
https://application.com/#/dashboard /* HashRouter    */

Cuál usar es dictado principalmente por los navegadores que necesita admitir.BrowserRouterusa elAPI de historial, que es relativamente reciente y no es compatible con IE9 y versiones anteriores. Si no tiene que preocuparse por los navegadores más antiguos, es la opción recomendada.

Componentes

Los 3 componentes con los que interactuarás más cuando trabajes con React Router son:

BrowserRouter, generalmente alias comoRouter
Link
Route

BrowserRouterenvuelve todos los componentes de su ruta.

LinkLos componentes se utilizan, como puede imaginar, para generar enlaces a sus rutas.

RouteLos componentes son responsables de mostrar (u ocultar) los componentes que contienen.

BrowserRouter

A continuación, se muestra un ejemplo sencillo del componente BrowserRouter. Lo importa desde react-router-dom y lo usa para empaquetar toda su aplicación:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
ReactDOM.render(
<Router>
<div>
<!– –>
</div>
</Router>,
document.getElementById(‘app’)
)

Un componente BrowserRouter solo puede tener un elemento hijo, por lo que envolvemos todo lo que vamos a agregar en undivelemento.

Enlace

El componente Link se utiliza para activar nuevas rutas. Lo importas desdereact-router-dom, y puede agregar los componentes Link para apuntar a diferentes rutas, con eltoatributo:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link } from 'react-router-dom'
ReactDOM.render(
<Router>
<div>
<aside>
<Link to={/dashboard}>Dashboard</Link>
<Link to={/about}>About</Link>
</aside>
<!– –>
</div>
</Router>,
document.getElementById(‘app’)
)

Ruta

Ahora agreguemos el componente Ruta en el fragmento anterior para que las cosas realmente funcionen como queremos:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'
const Dashboard = () => (
<div>
<h2>Dashboard</h2>
…
</div>
)
const About = () => (
<div>
<h2>About</h2>
…
</div>
)
ReactDOM.render(
<Router>
<div>
<aside>
<Link to={/}>Dashboard</Link>
<Link to={/about}>About</Link>
</aside>
  <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">main</span><span style="color:#f92672">&gt;</span>
    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Route</span> <span style="color:#a6e22e">exact</span> <span style="color:#a6e22e">path</span><span style="color:#f92672">=</span><span style="color:#e6db74">'/'</span> <span style="color:#a6e22e">component</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">Dashboard</span>} <span style="color:#f92672">/&gt;</span>
    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Route</span> <span style="color:#a6e22e">path</span><span style="color:#f92672">=</span><span style="color:#e6db74">'/about'</span> <span style="color:#a6e22e">component</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">About</span>} <span style="color:#f92672">/&gt;</span>
  <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/main&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</Router>,
document.getElementById(‘app’)
)

Mira este ejemplo en Glitch:https://glitch.com/edit/#!/flaviocopes-react-router-v4/

Cuando la ruta coincide/, la aplicación muestra elTablerocomponente.

Cuando se cambia la ruta, haga clic en el enlace "Acerca de" para/about, el componente Tablero se elimina y elSobreEl componente se inserta en el DOM.

Observe laexactatributo. Sin esto,path="/"también coincidiría/about, ya que/está contenido en la ruta.

Coincidir con varios caminos

Puede hacer que una ruta responda a múltiples rutas usando una expresión regular, porquepathpuede ser una cadena de expresiones regulares:

<Route path='/(about|who)/' component={Dashboard} />

Renderizado en línea

En lugar de especificar uncomponentpropiedad enRoute, puede establecer unrenderapuntalar:

<Route
  path='/(about|who)/'
  render={() => (
    <div>
      <h2>About</h2>
      ...
    </div>
  )}
/>

Coincidir con el parámetro de ruta dinámica

Ya viste cómo usar rutas estáticas como

const Posts = () => (
  <div>
    <h2>Posts</h2>
    ...
  </div>
)
//…

<Route exact path="/posts" component={Posts} />

A continuación, se explica cómo manejar rutas dinámicas:

const Post = ({match}) => (
  <div>
    <h2>Post #{match.params.id}</h2>
    ...
  </div>
)
//…

<Route exact path="/post/:id" component={Post} />

En su componente de ruta puede buscar los parámetros dinámicos enmatch.params.

matchtambién está disponible en rutas renderizadas en línea, y esto es especialmente útil en este caso, porque podemos usar elidparámetro para buscar los datos de la publicación en nuestra fuente de datos antes de renderizar la publicación:

const posts = [
  { id: 1, title: 'First', content: 'Hello world!' },
  { id: 2, title: 'Second', content: 'Hello again!' }
]
const Post = ({post}) => (
<div>
<h2>{post.title}</h2>
{post.content}
</div>
)
//…

<Route exact path="/post/:id" render={({match}) => (
<Post post={posts.find(p => p.id === match.params.id)} />
)} />

Descarga mi gratisReact Handbook