react-router@6

Posted 2022-12-11 勇敢*牛牛

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 Detail

嵌套路由

嵌套路由，就是把定义规则的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 Admin

配置式路由

已经内置了；
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 App

使用craco库增量修改webpack