react-router-dom 6.0react-router-dom6.0 新特性，基本使用到新路由嵌套，动态路由参

这两天写新项目的时候按照往常一样使用 react-router-dom 发现 Switch不能导出了，查了一下原来react-router-dom升级到了6.0，变化很大，抽出时间看一下这块，写个记录。

开始使用

安装依赖

npm i react-router-dom

基本使用

import { BrowserRouter } from 'react-router-dom';

function App(){
    return (
        <BrowserRouter>
           
        </BrowserRouter>
    )
}

注意：BrowserRouter它用于包装不同的路由，基于HTML5 history API来跟踪React应用程序中组件的路由历史记录组件，最好放在最顶层所有组件之外，这样能确保内部组件使用Link做路由跳转时不出错。

与之前版本的区别

首先删除了 Switch新增了Routes

Routes是 Switch 组件的升级，并在之前的组件上加了一些新的特性。

在v5中，Switch会按顺序遍历查找自己的子元素，会渲染第一个匹配路由的组件；V6路由是根据最佳匹配而不是按顺序选择的- Routes 内的所有 <Route> 和 <Link> 是相对的。
v6中路由组件可嵌套，这使得路由可以在同一个地方而不用分散到不同组件更容易维护。

嵌套路由

- 可以嵌套组件实现路由的定义 v6使用 element替换v5中component、children、render

import { Routes, Route } from 'react-router-dom';
<Routes>
  <Route path="/main" element={<Main/>} >
    <Route path='news' element={<News/>}></Route>
    <Route caseSensitive path='articles' element={<Articles />}></Route>
    <Route inbdex element={<Home/>}></Route>
    <Route path='*' element={NotFound}></Route>
  </Route>
</Routes>

-当url为/main时：匹配Home组件在嵌套路由中，index属性为URL仅匹配了父级URL，即默认路由。

-当url为/main/news时：匹配News

-caseSensitive为是否区分路由大小写

-path属性取值为*时，可以匹配任何（非空）路径，同时该匹配拥有最低的优先级。可以用于设置404页面。

在父组件中使用Outlet来显示匹配到的子组件

import {Outlet} from 'react-router-dom';
function Main(){
    return (
        <div>
            // 自定义内容
            // 子组件内容
            <Outlet />
        </div>
    )
}

路由跳转

在跳转路由时，如果路径是/开头的则是绝对路由，否则为相对路由，即相对于“当前URL”进行改变。

Link&NavLink组件

import { Link,NavLink } from 'react-router-dom';

Link组件只能在Router内部使用

<Link to='header'>header</Link>

NavLink组件和Link组件的功能是一致的，区别在于可以判断其to属性是否是当前匹配到的路由
NavLink组件的style或className可以接收一个函数，函数接收一个isActive参数，可根据该参数调整样式

<NavLink style={ (isActive) => ({color: isActive ? 'red' : '#fff'}) }>
    NavLink
</NavLink>

使用useNavigate主动跳转

在v6中useNavigate取代了原先版本中的useHistory

import { useNavigate } from 'react-router-dom';
const TestNav:React.FC=()=>{
    const navigate = useNavigate();
    return <>
         <div onClick={() => navigate('/foo/:id')}>跳转</div>
         <div onClick={() => navigate('/foo?id=1')}>跳转</div>
     </>
}

使用`useParams`&`useSearchParams`获取路由参数

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

    const params = useParams();
    const [searchParams, setSearchParams] = useSearchParams();
    console.log(searchParams.get('id')) // 1
    return (
        <div>
            <h1>{params.id}</h1>
        </div>
    )

重定向路由 Navigate

//当在某个路径`/a`下，重定向到路径`/b`
import { Navigate } from 'react-router-dom';
function A(){
    return (
        <Navigate to="/b" />
    )
}

react-router-dom 6.0