博客

以下是两个版本之间的区别：

一、首先是注册路由的时候v5的Switch改为了Routes

v5，代码如下：

 import {Route, Switch} from 'react-router-dom' //引入react-router
 
<div>
        {/* 注册路由（编写路由链接） */}
    <Switch>
        ......
        ......
    </Switch>
 
 </div>

v6，代码如下：

 import {Route, Routes } from 'react-router-dom' //引入react-router
 
<div>
        {/* 注册路由（编写路由链接） */}
    <Routes >
        ......
        ......
    </Routes>
 
 </div>

二、v6不再支持用Route标签包裹子组件，可以直接使用element属性 也不需要

v5，代码如下：

 import {Route, Switch} from 'react-router-dom' //引入react-router
 
<div>
        {/* 注册路由（编写路由链接） */}
    <Switch>
        <Route path="/about">
            <About />
        </Route>
    </Switch>
 
 </div>

v6，代码如下：

 import {Route, Routes } from 'react-router-dom' //引入react-router
 
<div>
        {/* 注册路由（编写路由链接） */}
    <Routes >
        <Route path="/about" element={<About />} />
    </Routes>
 
 </div>

如果v5不用包裹子组件的形式写的话他的属性是component，下面代码有体现到。

三、v6中也不需要exact属性

exact在v5中起到的作用是精准匹配的作用，如果不写的话，

那么



path='/'



也会匹配



'/about'



和



'/home'



导致的结果就是下面两个路由就没用了

在v6中由于v6 内部算法改变，它默认就是匹配完整路径。

v5，代码如下：

 import {Route, Switch} from 'react-router-dom' //引入react-router
 
<div>
        {/* 注册路由（编写路由链接） */}
    <Switch>
        <Route exact path="/"  component={ Home } >
          </Route>
    </Switch>
</div>

v6，代码如下：

 import {Route, Routes } from 'react-router-dom' //引入react-router
 
<div>
        {/* 注册路由（编写路由链接） */}
    <Routes >
        <Route path="/" element={<Home />} />
    </Routes>
 
 </div>

四、v6 中，Route 先后顺序不再重要，它能够自动找出最优匹配路径

五、在v6中移除了NavLink中的actionclassName的这个属性

actionclassName这个属性是点击对应元素改变为对应的样式

在v6中可以使用三元运算符的方式实现这个功能

<NavLink className={navData=>navData.isActive?class.active : ""}

六、在v6中将Redirect改为Navigate

它当匹配不到路由时，需要使用Redirect做重定向，跳转到我们定义的组件（页面）中

v5，代码如下

在页面中直接写入重定向的路径

<Redirect to="/home/" />

v6，代码如下：

<Route path="/" element ={<Navigate replace to="/home" />} />

七、v6 嵌套路由改为相对匹配，不再像 v5 那样必须提供完整路径。

八、新增Outelt组件

此组件是一个占位符，告诉 React Router 嵌套的内容应该放到哪里。

<Link to="/home2">子路由</Link>
<Outlet></Outlet>

九、v6 用useNavigate实现编程式导航，不再使用useHistory

代码如下：

import {useNavigate} from "react-router-dom";
const navigate = useNavigate();
navigate("/home");

是除此之外，还可以使用navigate

(-1)

后退到前一页，使用navigate

-2)

后退到前一页的前一页， navigate

(1)

前向导航，依此类推

十、v6 目前没有prompt组件阻止不期望的导航。

如果在 v6 中要实现相应的功能，必须自己想办法，这可能是目前 v5 唯一的优势。