React Router v6使用路由嵌套和重定向

前言:React Router v5 和 v6 在嵌套路由中实现重定向的方式有所不同。在 v5 中，我们可以使用 <Redirect> 组件来实现重定向；而在 v6 中，我们需要使用 navigate 函数来实现重定向。

index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
// 路由组件
import App from './App'
import Layout from './pages/Layout'
import Login from './pages/Login'
import NotFound from './pages/NotFound'

// 导入子 路由组件
import Home from './pages/Home'
import ArticleList from './pages/ArticleList'
import ArticlePublish from './pages/ArticlePublish'

// 样式
import './index.less'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    <Router>
        <Routes>
            <Ro