一.项目框架的搭建

1./src/pages下建不同的页面Header.jsx，About.jsx，Home.jsx， Message.jsx，News.jsx，Detail.jsx

Header.jsx

import React from 'react'
import { useNavigate } from 'react-router-dom'export default function Header() {const navigate = userNavigate()function back () {navigate(-1)}function forward () {navigate(1)}return (<div><div className="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>React Router Demo</h2><button onClick={back}>后退</button><button onClick={forward}>前进</button></div></div></div>)}

---

About.jsx:

import React from 'react'
export default function About ()  {return (<h3>我是About的内容</h3>)
}

Home.jsx:

import React from 'react'
import { NavLink, Navigate, Outlet } from 'react-router-dom'
export default funciton Home () {const [sum, setSum] = React.useState(1)return (<div><h3>我是Home的内容</h3>{sum === 2 ? <Navigate to="/about" replace={true} />: <div>当前的sum的值是：</div>}<div><ul className="nav nav-tabs"><li><NavLink className="list-group-item" to="message">Message</NavLink></li><li><NavLink className="list-group-item" to="news">News</NavLink></li></ul><Outlet/></div></div>)
}

---

Message.jsx

import React from 'react'
export defakt function Message () {return (<div><ul><li><a href="#">message001</a></li></ul></div>)
}

News.jsx

import React from 'react'
import { Link, Outlet, useNavigate } from 'react-router-dom'export default function News () {const navigate = userNavigate()const [news] = React.useState([{id: '001', title: 'news0001', content: '锄禾日当午'},{id: '002', title: 'news0002', content: '汗滴禾下土'},{id: '003', title: 'news0003', content: '谁知盘中餐'},{id: '004', title: 'news0004', content: '粒粒皆辛苦'},])function showDetail (subNews) {navigate('detail', {replace: false,state: {id: subNews.id,title: subNews.title,content: subNews.content}})   }return (<div><ul>{news.map((subNews) => {return (<li key={subNews.id}><Link to="detail" state={{id: subNews.id,title: subNews.title,content: subNews.content}}>{subNews.title}</link>&nbsp;&nbsp;<button onClick={() => showDetail(subNews)}>查看详情</button></li>)})}</ul></div>)}

Detail.jsx

import React from 'react'
import {userLocation} from 'react-router-dom'
export default function Detail () {const {state: {id, title, content}} = useLocation()return (<ul><li>id</li><li>title</li><li>content</li></ul>)
}

2./src/routers下建index.js（用于项目引入所有的页面路径）

import { Navigete } from 'react-router-dom'
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'
export defult[{path: '/about',element: <About/>},{path: '/home',element: <Home />,children: [{path: 'message',element: <Message/>},{path: 'news',element: <News/>,children: [path: 'detail',element: <Detail/>]}] },{path: '/',element: <Navigate to="/about" / >}
]

3./src 下建App.jsx（用于引入所有的页面路由）

import React from 'react'
import { NavLink, useRoutes } from 'react-router-dom'
import routes from './routes'
import Header form './pages/Header'
import './App.css'export default function App () {const element = userRoutes(Routes)funciton computedClassName({isActive}) {return  isActive ? 'list-group-item chose' : 'list-group-item'}return (<div><div claassName="row"><Header/></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group"><NavLink className={computedClassName} to="/about">About</NavLink><NavLink className={computedClassName} to="/home">Home</NavLink></div></div><div className="col-xs-6"><div class="panel"><div className="panel-body">{element}</div></div></div></div></div>)
}

4./src 下建App.css （用于引入项目的样式）

.list-group-item.chose {background: pink !important;color: #FFF !important;
}.App {text-align: center;
}.App-logo {height: 40vmin;pointer-events: none;
}@media (prefers-reduced-motion: no-preference) {.App-logo {animation: App-logo-spin infinite 20s linear;}
}.App-header {background-color: #282c34;min-height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: calc(10px + 2vmin);color: white;
}.App-link {color: #61dafb;
}@keyframes App-logo-spin {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}