React-router-dom v6（类方法）

通过react-router-dom创建路由（类组件方法）

---

前言

在最近写项目的时候使用到了react-router-dom这个库，然后惊奇的发现跟我之前写的，所实现的内容几乎不同而且还有报错信息。于是我翻开了之前的项目，在控制台的报错信息及项目内的package.json中，才发现它升级到了v6版本，那么就跟我来看看，到底它发生了哪些变化。

---

一、说在前头

为了快速使用路由，请先确保您的环境处于：
node.js版本 >= 12.x.x
npm或者yarn包管理工具
JavaScript，React.js和React Hooks的基础知识

二、使用步骤

1.引入库

import React, {Component} from "react";
import {
    BrowserRouter as Router,
    Routes,
    Navigate,
    Route,
    NavLink,
    Outlet
} from 'react-router-dom'

2.创建一级路由

为了书写方便，部分组件皆放在App.js里

// App.js
// 创建一个App组件以及一个Layout组件
class App extends Component{
    render() {
        return (
            <div>
                <h1>路由示例</h1>
                <hr/>
                <Router>
                    <Routes>
                        <Route path="/" element={<Layout/>}>

                        </Route>
                    </Routes>
                </Router>
            </div>
        );
    }
}

class Layout extends Component{
    render() {
        return (
            <div>
                <div>
                    <nav>
                        <ul>
                            <li>
                                <NavLink to="/">首页</NavLink>
                            </li>
                            <li>
                                <NavLink to="/about">详情页</NavLink>
                            </li>
                            <li>
                                <NavLink to="/info/messages">信息页</NavLink>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        );
    }
}

export default App

Routes这个新的元素是以前 Switch 组件的升级版，它具有相对路由和链接、自动路由排名、嵌套路由和布局等功能。而且使用路由时，必须使用Routes将组件包裹
component变成了element，遇到地址时，会展示后面组件的内容，而且一定要写成组件的形式{<Layout/>}。
那么，咱先来运行一下，看看是否会出现结果。

仅仅是这样是不是有一点单调，咱接着往内部添加一些内容。

3.嵌套路由

//App.js

// App组件
<Route path="/" element={<Layout/>}>
    <Route index element={<Home/>}/>
</Route>

// Home组件
class Home extends Component{
    render() {
        return (
            <div>
                <h2>Home</h2>
            </div>
        );
    }
}

在Route中，index 与path属性是不可得兼的，而且index表示为当前路由的根。
如上方代码所示，在App组件中，嵌套路由要像我写的那样，并且将Home组件默认显示。
可是，当我这么写完后，却发现页面中并未出现Home组件的内容，是什么原因呢？
答： Outlet
嵌套路由一般需要与 Outlet 组件同时使用，此组件类似于Vue的router-view组件，告知子路由，将内容渲染至什么位置。
于是：

// Layout组件
// 在 </nav>后添加
<hr/>
<Outlet/>

即可在页面中显示出默认的Home组件的内容。

---

4.重定向

Navigate
代替了Redirect组件，当在某个路径/a下，要重定向到路径/b时，就可以通过Navigate组件进行重定向

<Router>
    <Routes>
        <Route path="/" element={<Layout/>}>
            <Route index element={<Home/>}/>
        </Route>
        <Route path="/notfound" element={<NotFound/>}/>
        <Route path="*" element={<Navigate to="/notfound"/>}/>
    </Routes>
</Router>

// NotFound.jsx
import React, { Component } from "react";

class NotFound extends Component{
    render() {
        return (
            <div>
                <h1>404页面</h1>
            </div>
        );
    }
}

export default NotFound

最后，请拥抱函数式编程！！！否则是无法使用钩子函数的