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>
            <Route path="/" element={<App />}>
                {/**这里重定向到home页面 */}
                <Route path="/" element={<Navigate to="/home" />}></Route>

                <Route path="/home" element={<Layout />}>
                    <Route exact path="/home" element={<Home />} />
                    <Route path="/home/article" element={<ArticleList />} />
                    <Route path="/home/publish" element={<ArticlePublish />} />
                </Route>

                <Route path="/login" element={<Login />}></Route>
                {/* 404页面 */}
                <Route path="*" element={<NotFound />}></Route>
            </Route>
        </Routes>
    </Router>
)
// ReactDOM.createRoot(document.getElementById('root')).render(<App />)

最后顺带提一下,因为子路由会继承父路由的路径,还可以 写成这样:

        <Routes>
            <Route path="/" element={<App />}>
                // 1.可以不要/home 相当于去 home 根页面
                <Route path="/" element={<Navigate to="home" />}></Route>
                // Layout页面
                <Route path="home" element={<Layout />}>
                    // 2.exact精确匹配,相当于去到 /home
                    <Route exact path="/home" element={<Home />} />

                    // 都是继承父路由Layout组件的路径 相当于去到 /home/article页面
                    <Route path="article" element={<ArticleList />} />
                    <Route path="publish" element={<ArticlePublish />} />
                </Route>

                <Route path="login" element={<Login />}></Route>
                {/* 404页面 */}
                <Route path="*" element={<NotFound />}></Route>
            </Route>
        </Routes>