Firstly you need to install the package, with the next command you do so:
$ npm i react-router-dom
This will allow us to build a network inside our App, so there is no need to refresh the whole system each time we change of page. It is composed by:
- BrowserRouter: an element that will contain the whole system and its logic.
- Switch: as the function will assign a specific route depending on the link sent.
- Route: as a case inside switch functions, it will have a path as a condition and returns a component.
It has three attributes: exact, says the match has to be precise; path="/nameOfPage", indicates the location of the component; component={ComponentPage}, brings the component that it will be shown. - Link: It sends the name path where the client wants to go. It only has one attribute: to="/path", the petition to a certain location.
In React each one of these components where the router wraps the switch and this last one wraps the group of routes. If you want to move to another page, for example, make sure you add Link labels instead of “a” ones.
You can import these elements as follow:
import {BrowserRouter as Router, Switch, Route} from'react-route-dom'import {Link} from'react-router-dom'
[ES]
- Primero necesita instalar el paquete, con el siguiente comando lo hace: *
`` jsx
$ npm reacciono-router-dom
’’
Esto nos permitirá construir una red dentro de nuestra aplicación, por lo que no es necesario actualizar todo el sistema cada vez que cambiamos de página. Está compuesto por:
- BrowserRouter: elemento que contendrá todo el sistema y su lógica.
- Cambiar: ya que la función asignará una ruta específica en función del enlace enviado.
- Ruta: como caso dentro de las funciones del interruptor, tendrá una ruta como condición y devuelve un componente.
Tiene tres atributos: exacto, dice que la coincidencia tiene que ser precisa; path = “/ nameOfPage”, indica la ubicación del componente; componente = {ComponentPage}, trae el componente que se mostrará. - Enlace: Envía el nombre de la ruta donde el cliente quiere ir. Solo tiene un atributo: to = “/ ruta”, la petición a una determinada ubicación.
En React cada uno de estos componentes donde el router envuelve el switch y este último envuelve el grupo de rutas. Si desea pasar a otra página, por ejemplo, asegúrese de agregar etiquetas de enlace en lugar de “a”.
Puede importar estos elementos de la siguiente manera:
`` jsx
importar {BrowserRouter como enrutador, conmutador, ruta} desde ‘react-route-dom’
importar {Link} desde ‘react-router-dom’
’’
