最新React Router6和之前的React Router有哪些区别？快速上手React Router6-上篇

React Router 6快速上手

之前跟着视频学路由，没注意到视频太老啦，现在路由更新了，很多东西都发生了变化，导致项目中react-router都不太能用，要不然就是直接安装react router5，要不就全更新成最新的版本，我觉得工作中也不能保证一直使用5，而且面试中也可能会用到6，所以总结了一下5和6的区别。

首先是一段很官方的说法：

1.概述

1. React Router以三个不同的包发布到npm上，它们分别为：
   1. react-router:路由的核心库，提供了很多的：组件、钩子
   2. react-router-dom:包含react-router所有内容，并添加一些专门用于DOM的组件，例如<BrowserRouter>等;
   3. react-router-native:包含所有react-router内容，并添加一些专门用于ReactNative的API，例如<NativeRouter>等
2. 与React Router 5.x版本相比，改变了什么？
   1. 内置组件的变化：移除<Switch/>，新增<Routers/>；
   2. 语法的变化：component={About}变为element={<About/>}等
   3. 新增多个hook：useParams、useNavigate、useMath；
   4. 官方明确推荐函数式组件了！！！
      … …

其实说了上面一段话还是不太懂，毕竟上面这段话是总结性的话，下面详细展开到底有啥不同，等把下面以及后续的文章都看完了之后，再看看总结，就会豁然开朗：

到底有哪些变化

在使用路由的时候，我们一般分为两步，一个是定义链接，一个是注册路由，定义链接我们通常是<Link>或者<NavLink>标签,定义链接这一部分5版本和6版本其实变化不是很大，主要是注册路由发生了较大的变化，下面详细说说用来注册路由的标签

1. <Routes>

• 官方新增了一个<Routes>标签，这个标签是在react-router-dom中的，通常需要引入：import {Routes} from 'react-router-dom'
• 之前<Route>标签都是被包裹在<Switch>中，但从前面提及我们知道，在6版本中已经删掉了，新增了<Routes>，在5版本中，通常是这样写的：

<Switch>
    <Route path='/about' component={About}/>
    <Route path='/home' component={Home}/>
</Switch>

在6版本中，写法发生了很大的变化：

<Routes>
    <Route path='/about' element={<About/>}/>
    <Route path='/home' element={<Home/>}/>
</Routes>

不知道大家有没有发现区别，这里有三处不一样，一个是Switch标签的变化，一个是component属性变成了element属性，{}中包裹的是不再是单纯的组件名字，而是组件标签~

这里我们思考到，当时我们写5版本的时候，Switch是为了在匹配路由Route的时候，如果匹配上了一项，代码就不会再往下执行去匹配其他项了，这里的Routes也是可以起到同样的作用的！！！不信我们可以在代码里面这样去写：

<Routes>
    <Route path='/about' element={<About/>}/>
    <Route path='/about' element={<About2/>}/>
    <Route path='/home' element={<Home/>}/>
</Routes>

如果动手去试一下就可以发现，页面上渲染的其实是<About/>,说明这段代码在输入路由’/about’后首先匹配到了组件<About/>,就不会再继续往下执行，去匹配<About2/>了~

2. 重定向

• 不知道大家记不记得，第5版本中有个<Redirect/>标签，这个标签也是react-router-dom中的，我们通常也需要引入：import {Redirect} from 'react-router-dom',这个标签的作用就是用户在没有输入具体的路径的时候，输入的是总路径，比如输入的是http://localhost:3000/，而不是具体的http://localhost:3000/about，在这种情况下，<Redirect/>会默认指定展示给用户的界面：

<Switch>
    <Route path='/about' component={About}/>
    <Route path='/home' component={Home}/>
    <Redirect to="/home" />
</Switch>

上面代码就是默认展示home界面；

• 6版本已经将这个标签给删除了，引入了新的标签<Navigate/>，具体使用是这样的：

<Routes>
    <Route path='/about' element={<About/>}/>
    <Route path='/home' element={<Home/>}/>
    <Route path='/' element={<Navigate to="/about"/>}/>
</Routes>

• 需要注意的是：这个标签的使用，只要视图渲染，就会引起页面的变化，这句话怎么理解呢，我们举个简单的例子：

//在函数组件的return中写入这样的代码
<div>
    {sum===2? <Navigate to="/about"/> :<h4>当前sum的值为{sum}</h4>}
</div>

这个sum在函数中原本已经定义好了，这里我们可以用到react的statehook去定义变量，这里就不再赘述。上述代码中，有一个三元运算符，表明如果sum变量等于2，那么就执行navigate标签，就会跳转到’/about’页面，否则就在页面中展示标题，标题中显示当前sum的值。

第六版中还新增了很多功能，下面一一说明

3.路由表

我们前面是需要自定义路由的：

<Routes>
    <Route path='/about' element={<About/>}/>
    <Route path='/home' element={<Home/>}/>
    <Route path='/' element={<Navigate to="/about"/>}/>
</Routes>

但是版本6中引入了一个hook，叫做useRoutes，这个hook将自动生成我们上面这一堆代码，具体怎么生成的呢，我们主要看下面这段代码：

//首先引入useRoutes,这个hook也是react-router-dom中的
import {useRoutes} from 'react-router-dom'
//然后下面我们使用函数式编程
function App(){
    const elements=useRoutes([
        {
            path:'/about',
            element:<About/>
        },
        {
            path:'/home',
            element:<Home/>
        },
        {
            path:'/',
            element:<Navigate to="/about"/>
        }
    ])
    return(
        <div>
            {elements}
        </div>
    )
}

上述代码中的elements叫做路由表，return中elements就自动生成了前面的路由注册的代码

上面就稍微概括了一些不同，其实5和6还是有很多不同，这篇文章篇幅有限，我们将在下一篇文章中聊，下一篇文章可以在react专栏中找到~