1. Uso de NavLink
1.1 Tanto NavLink como Link normal se pueden utilizar para enrutar saltos. La diferencia entre ellos es:
El componente NavLink se representa como una etiqueta en la página y la clase activa se agrega de forma predeterminada para identificar la ruta actual. La clase y el estilo activos se pueden personalizar mediante activeClassName y activeStyle.
NavLink puede especificar si desea coincidir exactamente con la ruta a través del atributo exacto. Si es verdadero, solo coincidirá con la ruta si es exactamente la misma. De lo contrario, coincidirá según el prefijo de ruta. Por ejemplo, si el atributo de destino de NavLink es /usuarios, la coincidencia exacta significa que se seleccionará solo cuando la ruta sea /usuarios, y la coincidencia no exacta significa que se seleccionará cuando la ruta sea /usuarios/*, incluido /usuarios./1, /usuarios/2, etc.
NavLink también puede personalizar el estilo de selección a través de la configuración de activeClassName y activeStyle.
En resumen, NavLink es un componente que puede ayudarnos mejor a completar la identificación del estado de selección de ruta. Si sólo quieres hacer un salto de ruta simple, usa Link.
1.2 Importación de NavLink
import {
NavLink} from 'react-router-dom'
1.3 Uso de NavLink
{
/* Navlink :当被点击时添加一个类名 active */}
<NavLink className="list-group-item " to='/about'>About</NavLink>
<NavLink className="list-group-item " to='/home'>Home</NavLink>
2. Uso de la etiqueta Switch y la etiqueta Redirect
2.1 En React, la etiqueta Switch es un componente proporcionado en React Router. Su función principal es representar selectivamente una ruta.
La coincidencia de ruta original coincidirá con todas las rutas, incluso si la coincidencia tiene éxito, la coincidencia continuará.
El componente Switch buscará el primer componente Route que coincida con la ruta actual entre todos los componentes secundarios y solo representará ese componente.
2.2 Importación de Switch y Redirección
import {
Redirect, Switch } from 'react-router-dom'
2.3. Uso de Switch y Redirect.
Normalmente, existe una correspondencia uno a uno entre la ruta y el componente.
Utilice la etiqueta Switch para envolver el enrutamiento y los enlaces de enrutamiento. Después de hacer coincidir, no habrá coincidencia hacia atrás
. Si ninguno de ellos coincide correctamente, utilice el enlace de enrutamiento en la etiqueta de redireccionamiento.
{
/* 注册路由 */}
<Switch>
<Route path='/about' component={
About} />
<Route path='/home' component={
Home} />
<Redirect to="/home" />
{
/*
Redirect:
一般写在所有路由注册最下方，当所有路由都没有匹配成功时，
就跳转到 Redirect 指定的路由
*/}
</Switch>
3. Coincidencia exacta y coincidencia difusa de Src
3.1 exacto Si se habilita la coincidencia exacta, el valor predeterminado es falso
3.1.1 Coincidencia exacta:
el enlace de enrutamiento debe ser exactamente el mismo que la ruta de enrutamiento para que la coincidencia sea exitosa.
Por ejemplo, to="/home/b/a" y path="/home" no puede coincidir correctamente
3.1 .2 Coincidencia difusa: si
la primera ruta del enlace de enrutamiento y la ruta de enrutamiento son iguales, la coincidencia será exitosa.
Por ejemplo, to="/home/b/a" y path="/home" pueden coincidir correctamente.
<Route exact={
true} path='/about' component={
About} />
<Route exact={
true} path='/home' component={
Home} />
Nota: No habilite la coincidencia precisa de manera casual
Blog personal: Notas de estudio para el resto de mi vida