前提：本篇文件主要描述的是router6在函数式组件中的使用
1.router6的使用
下载
npm install react-router-dom
index.js文件
// 从 react-dom/client 引入 ReactDOM
import ReactDOM from 'react-dom/client'
//引入BrowserRouter
import {
BrowserRouter } from 'react-router-dom'
import App from './App'
ReactDOM.createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>
)
除了<BrowserRouter>还有<HashRouter>,两者的区别如下：
1.底层原理不同：
BrowserRouter使用的是H5的history API
HashRouter使用的是URL的哈希值
2.path的表现形式不同
BrowserRouter的路径中没有#，例如localhost：3000/add
HashRouter的路径包含#，例如localhost:3000/#/add
3.刷新后对路由state参数的影响
BrowserRoute没有任何影响，因为state保存在history对象中
HashRouter刷新后导致路由state参数的丢失
创建路由的方式
1.路由的基本使用
import {
NavLink, Routes, Route, Navigate } from 'react-router-dom'
import About from './components/About.jsx'
import Home from './components/home.jsx'
import Children from "../components/children.jsx"
export default function App() {
return (
<div>
<NavLink to="/home">Home</NavLink>
<NavLink to="/about">About</NavLink>
<Routes>
<Route path="/home" element={
<Home />}>
{
/*嵌套路由（子路由）*/}
<Route path="/about" element={
<About />}></Route>
</Route>
<Route path="/about" element={
<About />}></Route>
<Route path="/" element={
<Navigate to="/home" />}></Route>
</Routes>
</div>
)
}
<Navigate>：只要 <Navigate> 组件被渲染，就会修改路径，切换视图。可用于路由重定向，设置进入页面默认跳转的路由页面。
2.创建路由表
// 路由表
// routes/index.js
import {
Navigate } from 'react-router-dom'
import About from '../components/About.jsx'
import Home from '../components/home.jsx'
import Children from "../components/children.jsx"
import
const routes = [
//路由重定向
{
path: '/',
element: <Navigate to="/home" />,
},
{
path: '/home',
element: <Home />,
//创建子路由
children:[
{
path:"children",
element:<Children/>
}
]
},
{
path: '/about',
element: <About/>,
},
]
export default routes
在 App.jsx中挂载路由
//App.jsx
import {
NavLink,useRoutes} from 'react-router-dom'
import About from './components/About.jsx'
import Home from './components/home.jsx'
//引入路由表
import routes from './router';
export default function App() {
//生成路由规则
const route=useRoutes();
return (
<div>
<NavLink to="/home">Home</NavLink>
<NavLink to="/about">About</NavLink>
<div className="content">
//在要显示路由页面的地方挂载路由
{
route}
</div>
</div>
)
}
嵌套路由（子路由）
import React, {
Fragment } from 'react'
import {
NavLink,Outlet} from 'react-router-dom'
export default function Home() {
return (
<Fragment>
<NavLink to="/home/children">children</NavLink>
<Outlet/>
</Fragment>
)
}
<Outlet>:设置子路由的出口，即在何处渲染子路由
2.路由传参
传递params参数
注册路由时声明params
{
path: '/about /:id',
element: <About/>,
},
传递参数
<NavLink to={
`/about/children/${
id}>children</NavLink>
使用useParms()接收参数
import React from 'react'
import {
useParams} from 'react-router-dom'
export default function Children() {
const {
id}=useParams();
return (
<div>About:{
id}</div>
)
}
传递search参数
注册
{
path: '/about',
element: <About/>,
},
传递参数
<NavLink to={
`/about/children?id=${
id}&message=${
message}`}>children</NavLink>
使用 useSearchParams() 接收参数。该方法返回一个包含两个元素的数组：search 参数和修改 search 参数的方法。
import React from 'react'
import {
useSearchParams } from 'react-router-dom'
export default function Children() {
const [searchParams,setSearchParms]=useSearchParams();
//获取相对应的值
const id=searchParams.get('id');
const message=searchParams.get('message');
function change() {
setSearchParams('id=2&message=ccc')
}
return (
<div>About
{
id}:{
message}
<button onClick={
change}>Change search params</button>
</div>
)
}
传递state参数
注册
{
path: '/about',
element: <About/>,
},
传递参数
<NavLink to="/about/children" state={
{
id:id,message:message}}>children</NavLink>
使用 useLocation() 接收参数。该方法返回路由组件的 location 对象
import React from 'react'
import {
useParams} from 'react-router-dom'
export default function Children() {
const {
state: {
id,message },
} = useLocation();
return (
<div>{
id}:{
message}</div>
)
}
useLocation()包含内容如下图
3.路由跳转
方式一
<NavLink to="/home">Home</NavLink>
方式二：useNavigate()
import React, {
Fragment } from 'react'
import {
NavLink,Outlet,useNavigate} from 'react-router-dom'
export default function Home() {
const navigate=useNavigate();
const linkTo=()=>{
navigate("/home/children",{
replace:false,
state:{
id:id,
message:message
}
})
}
const back=()=>{
//后退
navigate(1);
//前进
//navigate(-1);
}
return (
<Fragment>
<Button onClick={
linkTo}>children</Button>
<Button onClick={
back}>children</Button>
<Outlet/>
</Fragment>
)
}
useNavigate() 返回一个函数，调用该函数实现编程式路由导航。函数有两种参数传递方式。
第一种方式传递两个参数：路由和相关参数。参数只能设置 replace 和 state。想要传递 params 和 search 参数直接在路由带上。
第二种方式传递数字，代表前进或后退几步。