Reaccionar enrutador 6

1. Información general

React Router se envía en tres paquetes diferentes:

• react-router: biblioteca central de enrutamiento, que proporciona muchos componentes, ganchos
• react-router-dom: incluye react-routertodo y agrega componentes para el DOM, como<BrowserRouter>
• react-router-native: incluye react-routertodo , al tiempo que agrega API para ReactNative, como<NativeRouter>

Diferencias con las versiones de React Router 5.x:

• Cambios en los componentes incorporados: eliminados <Switch/>, agregados <Routes/>...
• Cambio gramatical: component={About}se convierte en element={<About/>}...
• Ganchos recién agregados: useParams, useNavigate, useMatch...
• El funcionario dijo claramente que se recomiendan componentes funcionales.

2 Uso básico

Instalar React Router versión 6

npm install react-router-dom

index.jsimportación de archivos<BrowserRouter>

// 从 react-dom/client 引入 ReactDOM
import ReactDOM from 'react-dom/client'
import {
    
     BrowserRouter } from 'react-router-dom'
import App from './App'

// React 18 的语法发生改变了
ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

App.jsConfigure enlaces de enrutamiento y registre rutas. <Route caseSensitive>El atributo se usa para especificar si la coincidencia distingue entre mayúsculas y minúsculas (el valor predeterminado es falso)

import {
    
     NavLink, Routes, Route } from 'react-router-dom'
import About from './components/About/About'
import Hello from './components/Hello/Hello'

// React 18 默认使用函数式组件了
export default function App() {
    
    
  return (
    <div>
      <NavLink to="/about">About</NavLink>
      <NavLink to="/hello">Hello</NavLink>
      <hr />
      <Routes>
        <Route path="/about" element={
    
    <About />}></Route>
        <Route path="/hello" element={
    
    <Hello />}></Route>
      </Routes>
    </div>
  )
}

<BrowserRouter>

<BrowserRouter>Se utiliza para envolver toda la aplicación.

import ReactDOM from 'react-dom/client'
import {
    
     BrowserRouter } from 'react-router-dom'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

<HashRouter>

La función es <BrowserRouter>la misma que , pero <HashRouter>modifica el valor hash de la barra de direcciones.

En las versiones 6.x <HashRouter>, <BrowserRouter>el uso de , es el mismo que en la versión 5.x.

<Routes/>y<Route/>

6 <Switch>, y se introduce un nuevo reemplazo:<Routes>

<Routes><Route>Para ser utilizado con y debe ser <Routes>envuelto con<Route>

<Route>Equivalente a una declaración if, si la ruta coincide con la URL actual, representa su componente correspondiente

<Route caseSensitive>El atributo se usa para especificar: si se debe hacer coincidir mayúsculas y minúsculas, el valor predeterminado es falso

A medida que cambia la URL, <Route>se analizan todos sus <Route>elementos secundarios para encontrar la mejor coincidencia y se procesa el componente.

<Route>También se puede usar anidado y se puede usar para useRoutes()configurar la tabla de enrutamiento, pero necesita <Outlet>representar sus subrutas a través de componentes.

<Navigate>redirigir

Cada vez que se renderiza <Navigate>el componente , se modifica la ruta y se cambia la vista. Se puede utilizar para la redirección de rutas.

replaceEl atributo se utiliza para controlar el modo de salto (presionar o reemplazar, el valor predeterminado es presionar).

import {
    
     NavLink, Routes, Route, Navigate } from 'react-router-dom'
import About from './components/About/About'
import Hello from './components/Hello/Hello'

export default function App() {
    
    
  return (
    <div>
      <NavLink to="/about">About</NavLink>
      <NavLink to="/hello">Hello</NavLink>
      <hr />
      <Routes>
        <Route path="/about" element={
    
    <About />}></Route>
        <Route path="/hello" element={
    
    <Hello />}></Route>
        <Route path="/" element={
    
    <Navigate to="/about" />}></Route>
      </Routes>
    </div>
  )
}

import React, {
    
     useState } from 'react'
import {
    
     Navigate } from 'react-router-dom'

export default function Home() {
    
    
  const [sum, setSum] = useState(1)
  return (
    <div>
      <h1>Home</h1>
      {
    
    /* 根据sum的值决定是否切换视图 */}
      {
    
    sum === 1 ? <h4>sum的值为{
    
    sum}</h4> : <Navigate to="/about" replace={
    
    true} />}
      <button onClick={
    
    () => setSum(2)}>将sum变为 2</button>
    </div>
  )
}

<NavLink>resaltado de ruta

Para lograr el efecto "resaltado" de la navegación, la versión 6 no puede especificar directamente el nombre de la clase resaltada y debe devolverse a través de una función. Esta función pasa un objeto, similar a si {isActive: true}la ruta de bandera está activada

De forma predeterminada, cuando el subcomponente Homede coincide con éxito, Homela navegación de también se resalta y endla propiedad puede eliminar este efecto.

// NavLink 默认类名是 active，下面是指定自定义类名

//自定义样式
<NavLink className={
    
    ({
     
      isActive }) => isActive ? 'base MyClass' : 'base'} to='/about'>about</NavLink>

//可以抽离出来
function computedActive({
     
      isActive }) {
    
    
  return isActive ? 'base MyClass' : 'base'
}
<NavLink className={
    
    computedActive} to='/about'>About</NavLink >

// 默认情况下，当 Home 的子组件匹配成功，Home 的导航也会高亮
// 当 NavLink 上添加了 end 属性后，若 Home 的子组件匹配成功，则 Home 的导航没有高亮效果。
<NavLink to="home" end >home</NavLink>

useRoutes()tabla de ruteo

Las reglas de enrutamiento pueden extraer un módulo por separado

// 路由表
// routes/index.js
import {
    
     Navigate } from 'react-router-dom'
import About from '../components/About/About'
import Hello from '../components/Hello/Hello'

const routes = [
  {
    
    
    path: '/about',
    element: <About />,
  },
  {
    
    
    path: '/hello',
    element: <Hello />,
  },
  {
    
    
    path: '/',
    element: <Navigate to="/about" />,
  },
]

export default routes

// 引入路由表
// App.js
import {
    
     NavLink, useRoutes } from 'react-router-dom'
import routes from './routes'

export default function App() {
    
    
  // 生成路由规则
  const element = useRoutes(routes)

  return (
    <div>
      <NavLink to="/about">About</NavLink>
      <NavLink to="/hello">Hello</NavLink>
      <hr />
      {
    
    element}
    </div>
  )
}

<Outlet>rutas anidadas

• En el enrutamiento anidado, debe usar para <Outlet>establecer la salida de enrutamiento del enrutamiento secundario, es decir, dónde representar el enrutamiento secundario.
• Al configurar el enlace de enrutamiento secundario, puede ser to="news", to="./news"pero no to="/news".

Rutas anidadas sin tablas de enrutamiento:

// App.js
export default function App() {
    
    
  return (
    <div>
      <NavLink to="about">About</NavLink>
      <NavLink to="hello">Hello</NavLink>
      <hr />
      <Routes>
        <Route path="about" element={
    
    <About />} />
        <Route path="hello" element={
    
    <Hello />}>
          <Route path="news" element={
    
    <News />} />
          <Route path="message" element={
    
    <Message />} />
        </Route>
        <Route path="/" element={
    
    <Navigate to="about" />} />
      </Routes>
    </div>
  )
}

Rutas anidadas usando tablas de rutas:

// 路由表
const routes = [
  {
    
    
    path: '/about',
    element: <About />,
  },
  {
    
    
    path: '/hello',
    element: <Hello />,
    // 定义二级路由，注意不要加 /
    children: [
      {
    
    
        path: 'news',
        element: <News />,
      },
      {
    
    
        path: 'message',
        element: <Message />,
      },
    ],
  },
  {
    
    
    path: '/',
    element: <Navigate to="/about" />,
  },
]

// Hello 子组件
import React, { Fragment } from 'react'
import { NavLink, Outlet } from 'react-router-dom'

export default function Hello() {
  return (
    <Fragment>
      <h2>I am Hello!</h2>
      {/* 子路由链接 */}
      <NavLink to="news">News</NavLink>
      <NavLink to="message">Message</NavLink>
      <hr />
      {/* 子路由出口 */}
      <Outlet></Outlet>
    </Fragment>
  )
}

3 parámetros de enrutamiento

Tome el ejemplo de no usar la tabla de enrutamiento

pasar paramsparámetros

Declarar paramsparámetros , igual que React Router 5

export default function App() {
    
    
  return (
    <div>
      <Routes>
        <Route path="hello" element={
    
    <Hello />}>
          <Route path="message" element={
    
    <Message />}>
            <Route path="detail/:id/:name/:age" element={
    
    <Detail />} />
          </Route>
        </Route>
      </Routes>
    </div>
  )
}

pasar parámetros

<Link to={
    
    `detail/${
      
      item.id}/${
      
      item.name}/${
      
      item.age}`}>{
    
    item.name}</Link>

Utilice useParams()el paramsparámetro de recepción. useParams()devuelve un objeto de parámetro

import React from 'react'
import {
    
     useParams, useMatch } from 'react-router-dom'

export default function Detail() {
    
    
  // 解构赋值
  const {
    
     id, name, age } = useParams()
  return (
    <div>
      <li>id:{
    
    id}</li>
      <li>name:{
    
    name}</li>
      <li>age:{
    
    age}</li>
    </div>
  )
}

useMatch también es posible, pero debe pasar la ruta

pasar searchparámetros

Igual que la versión 5, solo registre la ruta normalmente

<Route path="detail" element={
    
    <Detail />} />

pasar parámetros

<Link to={
    
    `detail?id=${
      
      item.id}&name=${
      
      item.name}&age=${
      
      item.age}`}>{
    
    item.name}</Link>

Se utiliza useSearchParams()para recibir parámetros. Este método devuelve una matriz con dos elementos: searchel parámetro y el método que modifica searchel parámetro

Se necesita el método get para sacarlo.searchParams.get('id')

import React from 'react'
import {
    
     useSearchParams } from 'react-router-dom'

export default function Detail() {
    
    
  // 数组的解构赋值
  const [searchParams, setSearchParams] = useSearchParams()
  // 需要调用 get() 方法获取对应的参数值
  const id = searchParams.get('id')
  const name = searchParams.get('name')
  const age = searchParams.get('age')

  function change() {
    
    
    setSearchParams('id=666&name=Lily&age=888')
  }

  return (
    <div>
      <li>id:{
    
    id}</li>
      <li>name:{
    
    name}</li>
      <li>age:{
    
    age}</li>
      <button onClick={
    
    change}>Change search params</button>
    </div>
  )
}

useLocation también puede eliminar el parámetro de búsqueda, y la devolución es un objeto, simplemente haga clic en buscar

pasar stateparámetros

Igual que la versión 5, solo registre la ruta normalmente

<Route path="detail" element={<Detail />} />

Pasar parámetros, que es diferente de la versión 5, no necesita escribirse en un objeto

<Link to="detail" state={
    
    {
    
     id: item.id, name: item.name, age: item.age }}>
  {
    
    item.name}
</Link>

Se utiliza useLocation()para recibir parámetros. Este método devuelve locationel objeto , que es locationel atributo del componente de enrutamiento de la versión 5, que contiene stateel parámetro

import {
    
     useLocation } from 'react-router-dom'

export default function Detail() {
    
    
  // 连续解构赋值
  const {
    
    
    state: {
    
     id, name, age },
  } = useLocation()

  return (
    <div>
      <li>id:{
    
    id}</li>
      <li>name:{
    
    name}</li>
      <li>age:{
    
    age}</li>
    </div>
  )
}

useNavigate()Navegación de enrutamiento programático

useNavigate()Devuelve una función a la que se puede llamar para implementar la navegación de ruta programática. Hay dos formas de pasar parámetros a una función.

La primera forma pasa dos parámetros: ruta y parámetros relacionados. Los parámetros solo se pueden establecer replacey state. Quiere pasar paramslos searchparámetros y directamente en la tira de enrutamiento

La segunda forma de pasar números, representando unos pocos pasos hacia adelante o hacia atrás.

import React, {
    
     useState } from 'react'
import {
    
     Outlet, useNavigate } from 'react-router-dom'

export default function Message() {
    
    
  const [list] = useState([
    {
    
     id: 1, name: 'Bruce', age: 33 },
    {
    
     id: 2, name: 'You', age: 3 },
    {
    
     id: 3, name: 'React', age: 333 },
  ])

  const navigate = useNavigate()

  function showDetail(item) {
    
    
    navigate('detail', {
    
    
      replace: true,
      state: {
    
    
        id: item.id,
        name: item.name,
        age: item.age,
      },
    })
  }

  function back() {
    
    
    navigate(1)
  }

  function forward() {
    
    
    navigate(-1)
  }

  return (
    <div>
      <ul>
        {
    
    list.map((item) => {
    
    
          return (
            <li key={
    
    item.id}>
              <button onClick={
    
    () => showDetail(item)}>查看详情</button>
              <button onClick={
    
    back}>后退</button>
              <button onClick={
    
    forward}>前进</button>
            </li>
          )
        })}
      </ul>
      <Outlet></Outlet>
    </div>
  )
}

4 otros ganchos

useMatch()

Devuelve matchlos datos , que es matchel atributo en la versión 5

Las reglas de enrutamiento correspondientes al componente deben pasarse para devolver correctamente, de lo contrario, devolvernull

// Detail.jsx
import {
    
     useParams, useMatch } from 'react-router-dom'

export default function Detail() {
    
    
  const match = useMatch('hello/message/detail/:id/:name/:age')
  console.log(match)
  return (
    <div>
      <li>id</li>
    </div>
  )
}

/*
params: {id: '1', name: 'Bruce', age: '33'}
pathname: "/hello/message/detail/1/Bruce/33"
pathnameBase: "/hello/message/detail/1/Bruce/33"
pattern: {path: 'hello/message/detail/:id/:name/:age', caseSensitive: false, end: true}
*/

useInRouterContext()

El gancho regresa si el componente <Router>se representa en el contexto de , de lo contrario . Es decir, si el componente está envuelto en este tipo cosas. Esto es útil para bibliotecas de componentes de terceros.useInRouterContexttruefalse<BrowserRouter>

useNavigationType()

Devuelve el tipo de navegación actual (cómo llegó el usuario a la página actual)

Valor devuelto: POP, PUSH,REPLACE

POPSignifica que el componente de enrutamiento se abre directamente en el navegador (actualizar la página)

useOutlet()

Se utiliza para renderizar rutas anidadas renderizadas en el componente actual

const result = useOutlet()
console.log(result)
// 如果嵌套路由没有挂载,则返回 null
// 如果嵌套路由已经挂载,则展示嵌套的路由对象

useResolvedPath()

Dado un valor de URL, analice los valores : path, search,hash

const res = useResolvedPath('/user?id=001&name=Bruce#React')
console.log(res)

/*
hash: '#React'
pathname: '/user'
search: '?id=001&name=Bruce'
*/