react-router-domV6版本的路由和嵌套路由寫法詳解

<NavLink to="/home">Home</NavLink>
<NavLink to="/about">about</NavLink>

<Routes>
  <Route path='/home' element={<Home/>}/>
  <Route path='/about' element={<About/>}/>
</Routes>

<NavLink to="/home">Home</NavLink>
<NavLink to="/about">about</NavLink>

<Routes>
  <Route path='/home' element={<Home/>}/>
  <!--要嵌套的路由這裡一定要寫/*  為瞭告訴這個路由後續會跟著其它路徑
    NavLink 千萬不要寫和Route一樣的/about/*
    否則/about 這個按鈕路由css中的active會消失
   -->
  <Route path='/about/*' element={<About/>}/>
</Routes>

<NavLink to="/about/news">新聞</NavLink>
<NavLink to="/about/message">消息</NavLink >

<Routes>
    <Route path='news' element={<News/>}/>
    <Route path='message' element={<Message/>}/>
</Routes>

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>
            
        )
    }
}

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>
        )
    }
}

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>
        )
    }
}

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}/>
        )
    }
}