react-router@6.0

react-router6.0做出了一些改变

路由注册将<Switch />改成了<Routes />

路由引入将component改成了element

新增多个hook

新增组件

新增routes和路由注册用法

import React, { Component } from 'react'
import { Link, Route, Routes } from 'react-router-dom'
import PagesOne from '../pages/PagesOne'
import PagesTwo from '../pages/PagesTwo'
export default class Index extends Component {
  render() {
      return (
        <>
            <div>
                <Link to="/PagesOne">页面1</Link>
                <Link to="/PagesTwo">页面2</Link>
            </div>
              {/* 注册路由 */}
              <Routes>
                  <Route path="/PagesOne" element={<PagesOne />}></Route>
                  <Route path="/PagesTwo" element={ <PagesTwo />}></Route>
              </Routes>   
        </>
    )
  }
}

重定项Redirect

react-route6.0版本已经移除了Redirect组件，实现重定向可以使用通配符配合Navigate组件的方式实现

 
render() {
      return (
        <>
            <div>
                <Link to="/PagesOne">页面1</Link>
                <Link to="/PagesTwo">页面2</Link>
            </div>
              {/* 注册路由 */}
              <Routes>
                   {/* caseSensitive:区分大小写 */}
                  <Route path="/PagesOne" caseSensitive element={<PagesOne />}
                  <Route path="/PagesTwo" element={<PagesTwo />}></Route>
                 <Route path="*" element={<Navigate to="/PagesTwo" />} />
              </Routes>   
        </>
    )
  }

Navigate

Navigate组件只要被渲染，就修改路径并切换视图。

NavLink

路由高亮效果，activeClassName在6版本已经不再使用，如果需要实现高亮效果，将className写成函数的形式，函数接收一个参数，参数为一个对象名为isActive的值，该值为ture，表示该路由被激活。

<div>
    <NavLink to="/PagesOne">1</NavLink>
    <NavLink className={(a)=>{return a.isActive?'acitve pages': 'pages'}} to="/PagesTwo">2</NavLink>
</div>

useRoute路由表

react-route6支持路由表配置了！！！！！！！

新建一个文件夹routes，在新建一个路由表文件index.js,配置路由规则

import PagesOne from '../pages/PagesOne'
import PagesTwo from '../pages/PagesTwo'
export default [
    {
        path: '/PagesOne',
        element: <PagesOne />   
    },
    {
        path: '/PagesTwo',
        element: <PagesTwo />   
    }
]

导出路由并使用路由规则

import React from 'react'
import {NavLink,useRoutes} from 'react-router-dom'
import routes from '../route/index'
export default function Index() {
let  element=useRoutes(routes)
      return (
        <>
            <div>
                <NavLink to="/PagesOne">页面1</NavLink>
                <NavLink to="/PagesTwo">页面2</NavLink>
            </div>
              {/* 注册路由 */}
            { element}   
        </>
    )
  }

值得注意的是：路由表的方式使用的必须是Hooks的方式，即可组件必须是函数组件，类组件无法实现。

嵌套路由

children配置项

import PagesOne from '../pages/PagesOne'
import PagesTwo from '../pages/PagesTwo'
import Child from '../pages/Child'
import ChildOne from '../pages/ChildOne'
export default [
    {
        path: '/PagesOne',
        element: <PagesOne />,
        
    },
    {
        path: '/PagesTwo',
        element: <PagesTwo />,
        children: [
            {
                path: 'Child',
                element: <Child />
            },
            {
                path: 'ChildOne',
                element: <ChildOne />
            },
        ]
    }
]

使用路由出口组件Outlet（类似vue的routeView）

在对应的路由组件

import React from 'react'
import { Link,Outlet} from 'react-router-dom'
export default function PagesTwo() {
  return (
    <div>
          <Link to="Child">点我看片</Link>
           <Link to="ChildOne">点我学习</Link>
          <Outlet></Outlet>
    </div>
  )
}

​

route-hooks

路由传参

组将路由传参和5版本的一样，只是由于是函数式组件接收参数需要借助hooks来实现。

useParams：获取params参数

入参：

<NavLink to="/PagesTwo/13/xiaohuang">页面2</NavLink>

路由表：

    path: '/PagesTwo/:id/:name',

接参数

import React from 'react'
import { Link,Outlet,useParams} from 'react-router-dom'
export default function PagesTwo() {
  let params=useParams()
  return (
    <div>
          <Link to="Child">点我看片</Link>
          <Link to="ChildOne">点我学习</Link>
          {params.id}++++{params.name }
          <Outlet></Outlet>
    </div>
  )
}

获取match

5版本通过match获取到参数，6版本可以使用useMatch来获取

let match = useMatch("/PagesTwo/:id/:name")

获取search参数

使用useSearchParams获取search参数，获取的值是一个数组，数组第一项使用实例，第二项是一个函数，第一个实例调用get方法获取对应的参数；第二个项适用于设置其参数。

import React from 'react'
import { Link,Outlet,useParams,useSearchParams} from 'react-router-dom'
export default function PagesTwo() {
    let [search,searchFn] = useSearchParams()
    return (
    <div>
          <Link to="Child">点我看片</Link>
          <Link to="ChildOne">点我学习</Link>
        {search.get('id')}++++{search.get('name')}
          <Outlet></Outlet>
    </div>
  )
}

这种方式路由表正常配置即可

获取location

seach参数在版本5的时使用location获取，在6可以通过hook：useLocation获取到location

import {useLocation} from 'react-router-dom'
let a=useLocation()
console.log(a)

获取state参数

这里是使用useLocation获取，useLocation中有个state属性，通过这个属性获取

编程式路由导航

useNavigate(path,[obj])

import React from 'react'
import { Link,Outlet,useNavigate} from 'react-router-dom'
export default function PagesTwo() {
    let navigate=useNavigate()
    function gotoOne() { 
        navigate('/One')
        }
    return (
    <div>
          <Link to="Child">点我看片</Link>
            <Link to="ChildOne">点我学习</Link>
            <input type="button" value="点我" onClick={gotoOne}/>
          <Outlet></Outlet>
    </div>
  )
}

转state参数的时候

navigate('/One',{
    replace:false,
    state:{
        name:'xiaohzi',
        age:12
    }
})

配置项只支持replace和state

使用useNavigate实现前进和后退

import {useNavigate} from 'react-router-dom'
let navigate=useNavigate()
navigate(1)
navigate(-1)

useInRouterContext

表示该路由是否处在路由环境上下文。是被BrowserRouter组件包裹的全部路由组件都是处在路由环境上下文内，获取的值是一个Boolean值

import React from 'react'
import { Link,Outlet,useInRouterContext} from 'react-router-dom'
export default function PagesTwo() {
    let a = useInRouterContext()
    console.log(a);
    return (
    <div>
          <Link to="Child">点我看片</Link>
        <Link to="ChildOne">点我学习</Link>
          <Outlet></Outlet>
    </div>
  )
}

useNavigationType

表示获取到通过何种方式跳到该路由的

declare function useNavigationType(): NavigationType;
type NavigationType = "POP" | "PUSH" | "REPLACE";

POP：刷新

useOutlet

declare function useOutlet(): React.ReactElement | null;

如果组件没有挂载，获取的是null，组件挂载了将获取到组件的实例对象

useResolvedPath

解析路由获取search，path和hash

declare function useResolvedPath(to: To): Path;

import { Link,Outlet,useResolvedPath} from 'react-router-dom'
let a = useResolvedPath('/about?id=12&name=13#woshini')
console.log(a);

结果

{pathname: '/about', search: '?id=12&name=13', hash: '#woshini'}