Reaccionar notas de estudio cuatro

Enrutador de reacción

introducir:

1. El enrutamiento es para mostrar diferentes páginas o contenido de acuerdo con diferentes direcciones URL

2. Instalación: npm install react-router-dom@5

usar:

importar

import {HashRouter, Route} from 'react-router-dom'

definir rutas

   render() {
        return (
            <div>
                <HashRouter>
                    <Route path="/home" component={Home} />
                    <Route path="/second" component={Second} />
                    <Route path="/mine" component={Mine} />
                </HashRouter>    
            </div>
        )
     }

(1) Sugerencia: encapsule la ruta por separado en un archivo js

(2) Preste atención al enrutamiento de primer nivel y al enrutamiento de varios niveles

redirigir

Significado: si no queremos que los usuarios accedan a una determinada ruta o la ruta no está en la ruta que escribimos, podemos dejar que el componente salte a la ruta que especificamos.

//模糊匹配，重定向
   <Redirect from="/" to="/home" exact />
   //exact 精确地
   <Route path="*" component={Text} />

rutas anidadas

componente padre:

<Route path="/home" component={Home} />

Subensamblaje:

 <Route path="/home/page1" component={Page1} />
 <Route path="/home/page2" component={Page2} />
 <Redirect from="/home" to="/home/page1" />

Salto de enrutamiento

(1) Enrutamiento declarativo

 <NavLink to="/home" activeClassName="ok">home</NavLink>
 <NavLink to="/second" activeClassName="ok">second</NavLink>
 <NavLink to="/mine" activeClassName="ok">mine</NavLink>

(2) Enrutamiento programático

this.props.history.push(routing)
props.history.push(enrutamiento)

 import {useHistory} from 'react-router-dom'
 const history = useHistory()
 history.push(路由)

Parámetros de enrutamiento

(1)

<Route path='/detail/:id' component={Detail} />

Enrutamiento dinámico: significa dinámico, la identificación se puede reemplazar y se puede obtener en props.match.params;

(2)

history.push({
    pathname:'/detail',
    query:{id}
  })

accesorios.ubicación.consulta.id

(3)

history.push({
    pathname:'/detail',
    state:{id}
  })

props.ubicación.estado.id

intercepción de ruta

<Route path='/test' render={() => {
    判断 ? <Home/> : <Login/>
  }} />

patrón de enrutamiento

HashRouter
NavegadorRouter