【react-router@6】-CFANZ编程社区

react-router@6

😂推荐使用函数组件
😶使用Routes替换原来的Switch组件
😪使用Navigate组件替换原来的Redirect组件☮✝
😫 Route组件必须包裹在Routes组件里
🍛 路由规则是默认严格匹配，匹配成功就不向下继续匹配
🥂自动严格模式匹配不能设置动态路由参数为？
🍚定义路由规则匹配渲染组件语法改变component/render/children => element={<名称 />} -🍻 新增了多个hook函数,useParams、useSearchParams、useNavigate、useRoutes等

改变了什么

定义路由规则

安装

yarn add react-router-dom@6

在入口文件中将根组件包裹；
Route用来定义路由规则的，它一定要在Routes组件中包裹起来，否则报错
Link, NavLink 用于声明式导航，它们编译为html都为a标签，NavLink有激活样式
Navigate重定向 to跳转到url地址 replace是否可以回退

// 定义路由规则
<h1>APP</h1>
<NavLink to="/home" end className={isActive => (isActive ? 'myactive' : '')}>home</NavLink>
---- 
<NavLink to="/about" state={{data:"栓Q"}}>about</NavLink>
_____-
<NavLink to="/detail/3?age='tony'" state={{data:"栓Q"}}>about</NavLink>
<hr />
<Routes>
    <Route path='/home' element={<Home/>}/>
    <Route path='/about' element={<About/>}/>
    <Route path='/detail/:id' element={<Detail/>}/>{/* 自动严格模式匹配不能设置动态路由参数为？ */}
    <Route path='/' element={<Navigate to="/home" replace />}/>
    <Route path='*' element={<h1>404页面</h1>}/>
</Routes>

声明式导航

to 指定跳转到的路由地址
state 对象，隐式传递数据
replace 参数是boolean 是否可以回退
end它是相当于5版本中的exact 严格匹配 ==> / 就是最后，后面没有匹配内容参数是boolean
激活样式默认的名称为active,如果你想修改它，则需要通过className={isActive=>isActive?'aa':''}

import React from 'react'
// 
import {Routes,Route,link,NavLink,Navigate} from "react-router-dom"
import About from './views/About/'
import Home from './views/Home'
export default function App() {
  return (
        <>
            <h1>APP</h1>
            <NavLink to="/home" end className={isActive => (isActive ? 'myactive' : '')}>home</NavLink>
            ---- 
            <NavLink to="/about" state={{data:"栓Q"}}>about</NavLink>
            <hr />
            <Routes>
                <Route path='/home' element={<Home/>}/>
                <Route path='/about' element={<About/>}/>
                <Route path='/' element={<Navigate to="/home" replace />}/>
            </Routes>
        </>


  )
}

编程式导航

在5的时候，我们每一个直接被路由渲染的组件都可再props中获取到路由对象，useHistory函数也没了但是在6中就没有了，他提供了一系列的钩子hook函数来完成路由的跳转

const navigate = useNavigate()
const jumpUrl = () => {
 // 参数1：string/number  string它就是一个url地址，number就是回退的步数 正向前 负向后
 // 参数2：对象，可选，可以不写
 // navigate('/about', {
 //   state: {}, // 隐式传递数据
 //   replace: true // 不可回退
 // })
  navigate('/about')
  navigate(-1)
}

页面参数获取

import { useLocation, useParams, useSearchParams } from 'react-router-dom'

import React from 'react'
import { useLocation, useParams, useSearchParams } from 'react-router-dom'
// useParams 获取动态路由参数
// useSearchParams 获取search字符串
// useLocation location对象，可以得到state数据，得到pathname，得到search字符串

const Detail = () => {
  const location = useLocation()
  const params = useParams()
  // search它是一个对象，URLSearchParams对象，可以用里面的get方法获取search中的字段数据
  // setSearch 可以动态的修改当前search字符串中的字段数据，一般用不到
  // const [search, setSearch] = useSearchParams()
  const [search] = useSearchParams()

  // console.log('location', location)
  // console.log('params', params)
  // console.log('search', search, setSearch)

  return (
    <div>
      <h3>页面详情</h3>
      <div>动态路由参数id：{params.id}</div>
      <div>state中的数据：{location.state?.data}</div>
      <div>search字符串中的age：{search.get('age')}</div>
      <button
        onClick={() => {
          // setSearch('?age=100')
        }}
      >
        修改search字符串
      </button>
    </div>
  )
}

export default

嵌套路由

嵌套路由，就是把定义规则的Route由单标签更换成双标签就可以,里面还是要定义规则
注意父路由的占位问题

<Route path="/admin" element={<Admin />}>
           {/* 嵌套路由 之 默认页 */}
          {/* <Route index element={<Welcome />} /> */}
          <Route index element={<Navigate to="/admin/welcome" replace />} />
          {/* path中开头不要写 / 就可以 ,它会自动把父组件中的path拼接过来 /admin/welcome */}
          {/* /admin/welcome */}
          <Route path="welcome" element={<Welcome />} />
          <Route path="user" element={<User />} />
</Route>

嵌套路由之默认页index
<Route index element={<Welcome />}>
path中开头不要写 / 就可以
嵌套的位置是： Admin组件它是一个父路由渲染的组件，它里面有嵌套路由，需要一个占位

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

const Admin = () => {
  return (
    <div>
      <h3>后台管理</h3>
      <div>
      </div>
      <hr />
      <Outlet />
    </div>
  )
}
export default

配置式路由

已经内置了；
useRoutes这样的hook工具函数，它可以让原来的组件式路由，变成配置式路由

import React from 'react'
import { NavLink, Navigate, useRoutes } from 'react-router-dom'
// useRoutes 它就可以实现配置式路由

import Home from './views/Home'
import About from './views/About'
import Detail from './views/Detail'
import Admin from './views/Admin'
import Welcome from './views/Welcome'
import User from './views/User'

const App = () => {
  // useRoutes这样的hook工具函数，它可以让原来的组件式路由，变成配置式路由
  const routeElement = useRoutes([
    { path: '/', element: <Navigate to="/home" replace /> },
    {
      path: '/home',
      element: <Home />
    },
    {
      path: '/about',
      element: <About />
    },
    {
      path: '/detail/:id',
      element: <Detail />
    },
    {
      path: '/admin',
      element: <Admin />,
      children: [
        { index: true, element: <Navigate to="/admin/welcome" replace /> },
        {
          path: 'welcome',
          element: <Welcome />
        },
        {
          path: 'user',
          element: <User />
        }
      ]
    }
  ])

  return (
    <div>
      <div>
        <NavLink to="/home">首页</NavLink>
        <span> --- </span>
        <NavLink to="/about">关于</NavLink>
        <span> --- </span>
        <NavLink to="/admin">后台</NavLink>
      </div>
      <hr />
      {routeElement}
    </div>
  )
}

export default