REACT ROUTER

index.html

url/

server

index.html

url/diez-dias

server

¿Qué es React Router?

React Router es una librería con una colección de componentes de navegación la cual podemos usar tanto en web React o en móvil con React Native.

Beneficios de REact router

Nos da las herramientas para poder hacer SPA fácilmente.
Nos permite establecer rutas en nuestra aplicación.
Realizar redireccionamientos.
Manejo de rutas con parámetros.
Páginas para el manejo de errores como 404

instalación de react router

Para instalar la librería solo tenemos que ir a la terminal estar ubicados en la raíz de nuestro proyecto y ejecutar el siguiente comando:

npm install react-router-dom

Componentes pilares de react router

Browser Router
Switch
Route
Path
Exact

browser router

Es una envoltura para nuestra aplicación. Esta envoltura nos da acceso al API de historia de HTML5 para mantener nuestra interfaz gráfica en sincronía con la locación actual o URL. Debemos tener en cuenta que esta envoltura solo puede tener un hijo. Por lo general es Switch.

Switch

Este componente es el encargado de que solo se renderice el primer hijo Route o Redirect que coincide con la ubicación. Si no usar este componente todos los componentes Route o Redirect se van a renderizar mientras cumplan con la condición establecida.

Route

Con Route podemos definir las rutas de nuestra aplicación. Cuando definimos una ruta con Route le indicamos cuál es el componente que debe renderizar. Este componente cuenta con algunas propiedades:

Path: la ruta donde debemos renderizar nuestro componente podemos pasar un string.
Exact: Solo vamos a mostrar nuestro componente cuando la ruta sea exacta.

estructura de app.js con react router

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import About from './components/About'
import Users from './components/Users'
import Home from './components/Home'
<Router>
	<div>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
</Router>