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

前言: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" >About</MyNavLink>
                            <MyNavLink  to="/home" >Home</MyNavLink> 
  
                        </div>
                    </div>
                </div>
                <div className=col-xs-6>
                    <div className=panel>
                        <div className=panel-body>
                            {/* 注册路由 */}
    
                                <Routes>
                                		{/* 首次进入页面是重定向到/about路径 */}
                                        <Route path="*" element={<Navigate to="/about"/>}></Route>
                                        
                                        <Route path="/about" element={<About/>}></Route>
                                        <Route path="/home/*" element={ <Home/>}>									
                                        </Route>
                                </Routes>
         
                               
                        </div>

                    </div>
                </div>
            </div>
            
        )
    }
}

Home/index.jsx

import React, { Component } from react
import MyNavLink from ../../components/MyNavLink
import {Route,Routes,Navigate} from react-router-dom
import News from ./News
import Messages from ./Messages
export default class Home extends Component {
    render() {
        return (
           <div>
               <h3>Home内容</h3>
               <div className=list-group>
                                <MyNavLink to="news" >News</MyNavLink>
                                <MyNavLink  to="messages" >Messages</MyNavLink>  
                </div>
                <div>
                    <Routes>
                    	
                        <Route path="*" element={<Navigate to="messages"/>}></Route>
                        <Route path="news" element={<News/>}></Route>
                        <Route path="messages" element={<Messages/>}></Route>
                    </Routes>
                </div>
           </div>
        )
    }
}

Home/Messages/index.jsx

import React, { Component } from react

export default class Messages extends Component {
    render() {
        return (
            <ul>
                <li>message1</li>
                <li>message2</li>
                <li>message3</li>
                <li>message4</li>
            </ul>
        )
    }
}

MyNavLink/index.jsx

import React, { Component } from react
import { NavLink } from react-router-dom
export default class MyVavLink extends Component {
    render() {
        return (
            <NavLink  className="list-group-item" {...this.props}/>
        )
    }
}