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