react-router@6主要更新了适用于官方推荐的函数式组件的一些hook和一些方法的改变

1.注册路由

<Routes></Routes>替代<Switch></Switch>、element替代component

<Route> 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 <Outlet> 组件来渲染其子路由。

<Routes>
<Route path='/xxx' element={<Home/>} />
</Routes>

2.`<NavLink>`

<NavLink
    to="login"
    className={({ isActive }) => {
        console.log('home', isActive)
        return isActive ? 'base one' : 'base'
    }}
>login</NavLink>

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

3路由重定向

使用### <Navigate>，只要<Navigate>组件被渲染，就会修改路径，切换视图。默认跳转模式是push

<Routes>
<Route path='/xxx' element={<Home/>} />
<Route path='/' element={<Navigate to='home' />} />
</Routes>

4.useRoutes()路由表和嵌套路由

作用：根据路由表，动态创建<Routes>和<Route>。

//
// 1.根目录定义一个routers文件，在routers下定义一个index.js,index.js中代码如下
import { Navigate } from "react-router-dom"
import About from "../pages/About"
import Home from "../pages/Home"
import New from "../pages/Home/New"
import Message from "../pages/Home/Message"
import Detail from "../pages/Home/Message/Detail"
const routes = [
    {
        path: '/about',
        element: <About/>
    },
    {
        path: '/home',
        element: <Home/>,
        children: [
            {
                path: 'new',
                element: <New/>
            },
            {
                path: 'message',
                element: <Message/>,
                children: [
                    {
                        path: 'detail/:id/:title/:content',
                        element: <Detail/>
                    }
                ]
            }
        ]
    },
    {
        path: '/',
        element: <Navigate to="/about" />
    }
]
export default routes


// 2.引入路由表并使用
import { useRoutes } from 'react-router-dom'
 // 引入路由表
import routes from './routes'
const element = useRoutes(routes)


/* 路由组件 */
{element}

5.编程式导航

1.useNavigate()

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

export default function Demo() {
  const navigate = useNavigate()
  const handle = () => {
    //第一种使用方式：指定具体的路径
    navigate('/login', {
      replace: false,
      state: {a:1, b:2}
    }) 
    //第二种使用方式：传入数值进行前进或后退，类似于5.x中的 history.go()方法
    navigate(-1)
  }
  
  return (
    <div>
      <button onClick={handle}>按钮</button>
    </div>
  )
}

2.useHistory()

3.props.history

6.useParams()读取params参数

import React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';
import User from './pages/User.jsx'

function ProfilePage() {
  // 获取URL中携带过来的params参数
  let { id } = useParams();
}

function App() {
  return (
    <Routes>
      <Route path="users/:id" element={<User />}/>
    </Routes>
  );
}

7.useSearchParams()读取params参数

作用：用于读取和修改当前位置的 URL 中的查询字符串。

返回一个包含两个值的数组，内容分别为：当前的seaech参数、更新search的函数。

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

export default function Detail() {
	const [search,setSearch] = useSearchParams()
	const id = search.get('id')
	const title = search.get('title')
	const content = search.get('content')
	return (
		<ul>
			<li>
				<button onClick={()=>setSearch('id=008&title=哈哈&content=嘻嘻')}>点我更新一下收到的search参数</button>
			</li>
			<li>消息编号：{id}</li>
			<li>消息标题：{title}</li>
			<li>消息内容：{content}</li>
		</ul>
	)
}

7.useLocation()读取states参数

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

export default function Detail() {
	const x = useLocation()
	console.log('@',x)
  // x就是location对象: 
	/*
		{
      hash: "",
      key: "ah9nv6sz",
      pathname: "/login",
      search: "?name=zs&age=18",
      state: {a: 1, b: 2}
    }
	*/
	return (
		<ul>
			<li>消息编号：{id}</li>
			<li>消息标题：{title}</li>
			<li>消息内容：{content}</li>
		</ul>
	)
}

8.useMatch()返回当前匹配信息，对标5.x中的路由组件的match属性。

<Route path="/login/:page/:pageSize" element={<Login />}/>
<NavLink to="/login/1/10">登录</NavLink>

export default function Login() {
  const match = useMatch('/login/:x/:y')
  console.log(match) //输出match对象
  //match对象内容如下：
  /*
  	{
      params: {x: '1', y: '10'}
      pathname: "/LoGin/1/10"  
      pathnameBase: "/LoGin/1/10"
      pattern: {
      	path: '/login/:x/:y', 
      	caseSensitive: false, 
      	end: false
      }
    }
  */
  return (
  	<div>
      <h1>Login</h1>
    </div>
  )
}

9.其他hook

useInRouterContext()

useNavigationType()

useOutlet()

useResolvedPath()

React知识点总结（3）react-router@6