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

最新推荐文章于 2024-07-23 16:38:04 发布

web15085599741

最新推荐文章于 2024-07-23 16:38:04 发布

阅读量2k

点赞数 2

分类专栏：前端 html 文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/web15085599741/article/details/123351289

版权

本文介绍了React Router v6在路由嵌套和重定向方面的变化，强调了v6版本与v5的不同，指出在v6中子路由路径不再需要手动添加'/'，系统会自动拼接。通过示例展示了在App.jsx、Home/index.jsx、Home/Messages/index.jsx以及MyNavLink/index.jsx等组件中的应用。

摘要由CSDN通过智能技术生成

前言:v6版本与v5版本差异较大，以下为V6使用路由嵌套及路由重定向方法,子路由路径不用加"/"，v6中会自动拼接

App.jsx

import React, { Component } from 'react'
import { Route,Routes,Navigate} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
import Header from './components/Header'
import MyNavLink from './components/MyNavLink'
export default class App extends Component {
    

    render() {
        
        return (
            
            <div>
                
                <div className='row'>
                    <Header/>
                </div>
                <div className='row'>
                    <div className='col-xs-2 col-xs-offset-2'>
                        <div className='list-group'>
                            {/* 链接路由 */}
                            <MyNavLink to="/about" >