一、项目中配置路由
1. 配置路由文件
（1）安装 react-router-dom（当前V7.9.1）。官网写的是 npm i react-router不用管，react-router-dom包含所有react-router的功能。
（2）导入 createBrowserRouter 创建 路由实例对象；导入路由组件。
（3）配置路由规则。必要属性包括 path路径、element路由组件（用jsx写法）。
import {createBrowserRouter} from 'react-router-dom'
import Login from '../page/login/index.js' // 路由组件
import Home from '../page/home/index.js' // 路由组件
const router = createBrowserRouter([
{
path: '/login',
element: <Login/>
},
{
path: '/home',
element: <Home/>
}
])
export default router
2. 全局挂载路由
（1）在项目入口文件index.js中，导入 路由实例对象，导入 RouterProvider。
（2）将 RouterProvider 渲染到根组件中，并传入 router。（App.js不需要了）
import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
// 路由
import router from './router'
import { RouterProvider } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<RouterProvider router={router}></RouterProvider>
</React.StrictMode>
);
reportWebVitals();
3. 在路由组件中使用
（1）导入 Link 和 useNavigate 钩子函数。
（2）声明式导航 用 <Link></Link>标签，to属性 指定要去的路由地址。
（3）编程式导航 用 useNavigate 钩子函数创建 navigate方法，调用navigate方法进行跳转。
navigate(path, options)
import {Link, useNavigate} from 'react-router-dom'
// 登录组件
const Login = ()=> {
const navigate = useNavigate()
return <div>
<Link to='/home'>声明式导航</Link>
<button onClick={()=>navigate('/home')}>编程式导航</button>
</div>
}
export default Login
4. 路由嵌套
（1）配置路由规则时给父路由对象添加 children 属性。
const router = createBrowserRouter([
{
path: '/',
element: <Home />,
children: [
{
path: '/one',
element: <Menu />
}
]
}
])
（2）在父路由组件中，添加路由占位符 <Outlet />
import {Link, Outlet} from 'react-router-dom'
const Home = ()=> {
return <div>
<div>一级路由Home</div>
<Link to='/one'>二级路由Menu</Link>
<Outlet></Outlet>
</div>
}
export default Home
二、路由传参（编程式导航）
1. searchParams参数（vue的query参数）
（1）传参时，直接将参数以 查询字符串 的形式拼接到url后面。
// 方案一
navigate('/home?name=李四&age=20')
// 方案二
const searchParams = new URLSearchParams({name: '李四', age: 20})
navigate(\`/home?${searchParams.toString()}`)
（2）接收参数时，导入 useSearchParams 钩子函数，先获取整个searchParams对象，再用 get 方法获取每个参数值。
import {useSearchParams } from 'react-router-dom'
const [searchParams, setSearchParams] = useSearchParams()
const name = searchParams.get('name')
2. state参数
（1）传参时，navigate函数的 第二个参数 是一个options对象，state数据作为options对象的属性进行传递。
navigate('/home', { state: { name: '张三' }})
（2）接收参数时，导入 useLocation 钩子函数，通过 state 属性获取到整个state对象。
import { useLocation } from 'react-router-dom'
const stateParams = useLocation().state || {}
3. 动态路由传参
（1）配置路由规则时，path属性后面拼接 /:参数名
{
path: '/home/:id'
}
（2）传参时，在url后面拼接上 /参数值
navigate('/home/4')
（3）接收参数时，导入 useParams 钩子函数，获取到整个params参数对象。
import { useParams } from 'react-router-dom'
const params = useParams() || {}
三、其他路由配置
1. 默认二级路由
在路由规则对象中，去掉二级路由的 path属性，添加 index属性 值为 true。
2. 404路由页面
在路由规则对象的 末尾 添加一个路由对象，path值为 *。当请求的路由地址不存在时，会跳转到404页面。
{
path: "*",
element: <NotFound />
}
3.切换路由模式
用 createBrowserRouter 创建的是 历史模式；用 createHashRouter 创建的是 哈希模式。
