Tutorial del enrutador Reach

Una guía de inicio rápido para usar Reach Router en su aplicación React

En el último proyecto que usé Reach Router y creo que es la forma más sencilla de tener enrutamiento en una aplicación React.

Creo que es mucho más fácil que React Router, que es otro enrutador que usé en el pasado.

Aquí tienes un tutorial de 5 minutos para conocer los conceptos básicos.

Instalación

Primero, instálalo usando

npm install @reach/router

Si la @sintaxis es nueva para usted, es una característica de npm que permite un paquete con alcance. En otras palabras, un espacio de nombres.

A continuación, impórtelo a su proyecto.

import { Router } from '@reach/router'

Uso básico

Lo uso en el archivo React de nivel superior, index.jsen una instalación create-react-app , envolviendo todos los componentes que quiero que aparezcan:

ReactDOM.render( Router Form path="/" / PrivateArea path="/private-area" / /Router, document.getElementById('root'))

El pathatributo que agrega a los componentes me permite establecer la ruta para ellos.

En otras palabras, cuando escribo esa ruta en la barra de URL del navegador, Reach Router me muestra ese componente específico.

La /ruta es la ruta de índice y aparece cuando no se establece una URL o ruta junto al dominio de la aplicación. En otras palabras, la “página de inicio”.

La ruta predeterminada

Cuando un usuario visita una URL que no coincide con ninguna ruta, Reach Router lo redirecciona a la /ruta de forma predeterminada. Puede agregar una defaultruta para manejar este caso y mostrar un bonito mensaje “404” en su lugar:

Router Form path="/" / PrivateArea path="/private-area" / NotFound default //Router

Cambiar la ruta programáticamente

Utilice la navigatefunción para cambiar programáticamente la ruta en su aplicación:Te recomendamos Tostadora de pan

import { navigate } from '@reach/router'

navigate('/private-area')

Enlace a rutas en JSX

Utilice el Linkcomponente para vincularse a sus rutas mediante JSX:

import { Link } from '@reach/router'

Link to="/"Home/LinkLink to="/private-area"Private Area/Link

Parámetros de URL

Agregue parámetros utilizando la :paramsintaxis:

Router User path="users/:userId" //Router

Ahora, en este componente de usuario hipotético podemos obtener userIdcomo propiedad:

const User = ({ userId }) = ( pUser {userId}/p)

Rutas anidadas

Te mostré cómo se pueden definir las rutas de esta manera en tu archivo React de nivel superior:

Router Form path="/" / PrivateArea path="/private-area" //Router

Puedes definir rutas anidadas:

Router Form path="/" / PrivateArea path="/private-area" User path=":userId" / /PrivateArea/Router

Ahora puedes hacer que tu /private-area/23232enlace apunte al componente Usuario, pasando el userId 23232.

También puede optar por permitir que un componente defina sus propias rutas dentro de él. Utilice el /*comodín después de la ruta:

Router Form path="/" / PrivateArea path="/private-area/*" //Router

Luego, dentro del componente, puedes importar Router nuevamente y definir tu propio conjunto de subrutas:

//component PrivateAreaRouter User path="/:userId" //router

Cualquier ruta utilizada /private-area/somethingserá manejada por el componente Usuario, y la parte después de la ruta será enviada como su userIdpropiedad.

Para mostrar algo en la /private-arearuta ahora también necesitas agregar un /controlador en el PrivateAreacomponente:

//component PrivateAreaRouter User path="/:userId" / PrivateAreaDashboard path="/" //router

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Tutorial del enrutador Reach

InstalaciónUso básicoLa ruta predeterminadaCambiar la ruta programáticamenteEnlace a rutas en JSXParámetros de URLRutas anidadas

programar

es

2025-01-20

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente