升级！react-router V5到react-router V6----结合项目

千锋前端-React全家桶_React项目实战全球新闻发布管理系统_哔哩哔哩_bilibili

该项目的路由部分是用react-router V5写的，但是react的路由目前已经更新到V6版本，因此将项目中的路由部分更新了一下。主要包括如下几个方面：

一. <Routes/> 与 <Route/>

1. v6 版本中移出了先前的 <Switch> ，引入了新的替代者： <Routes> 。

2. <Routes> 和 <Route> 要配合使用，且必须要用 <Routes> 包裹 <Route> 。

3. <Route> 相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。

4. <Route caseSensitive> 属性用于指定：匹配时是否区分大小写（默认为 false ）。

5. 当 URL 发生变化时， <Routes> 都会查看其所有子 <Route> 元素以找到最佳匹配并呈现组件 。

6. <Route> 也可以嵌套使用，且可配合 useRoutes() 配置 “ 路由表 ” ，但需要通过 <Outlet> 组件

来渲染其子路由。

结合项目：

V5版本：

export default function IndexRouter() {
    return (
        <HashRouter>
            <Switch>
                {/* login，news，detail，/这四个可以拿到路由组件提供的props，但是NewsSandBox拿不到 */}
                <Route path="/login" component={Login} />
                {/* 下面这两个是作为游客身份登陆时可以访问到的组件 */}
                <Route path="/news" component={News} />
                <Route path="/d