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

海424

已于 2023-06-14 22:02:23 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： react.js 前端前端框架

于 2023-06-14 21:43:56 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_64747231/article/details/131216467

本文介绍了React Router v6中路由嵌套和重定向的实现方式，对比了与v5的不同。在v6中，重定向不再使用组件，而是改用函数进行处理。同时，文章还提到了子路由如何继承父路由路径的特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言: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=