1.安装react-router-dom
npm i react-router-dom 2.配置
（1）创建router实例对象并且配置路由对应关系
（2）路由绑定
import {createBrowserRouter,RouterProvider} from 'react-router-dom'
//（1）创建router实例对象并且配置路由对应关系
const router = createBrowserRouter([
{
path : '/login',
element:<div>我是登录页面</div>
},
{
path : '/article',
element:<div>我是文章页面</div>
},
])
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
{/* 路由绑定 */}
<RouterProvider router={router}>
</RouterProvider>
</React.StrictMode>
);二、路由模块封装
1.创建page文件夹
2.创建router文件夹
import Login from "../page/Login";
import Article from "../page/Article";
import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
{
path : '/login',
element : <Login></Login>
},
{
path : '/article',
element : <Article></Article>
}
])
export default router3.应用入口文件渲染
import {createBrowserRouter,RouterProvider} from 'react-router-dom'
import router from './router';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<RouterProvider router={router}>
</RouterProvider>
</React.StrictMode>
);三、路由导航
1.声明式导航
说明：声明式导航是指在模板中通过<Link/>组件描述要跳转到哪里
语法：<Link to=''/article''>跳转</Link>
使用场景：菜单
import { Link } from "react-router-dom"
const Login = ()=>{
return <>
<div>
Login页面
<Link to="/article">跳转文章</Link>
</div>
</>
}
export default Login2.编程式导航
说明：编程式导航是指通过‘useNavigate’钩子得到导航方法，然后通过调用方法以命令的形式进行路由跳转
语法：const navigate=uaeNavigate() navigate('/article')
使用场景：登录后跳转
import { Link,useNavigate } from "react-router-dom"
const Login = ()=>{
const navigate = useNavigate()
return <>
<div>
<button onClick={()=>navigate('/article')}>命令式跳转2</button>
</div>
</>
}
export default Login四、导航传参
1.searchParams传参
<div>
<button onClick={()=>navigate('/article?id=1001&name=jack哈啊哈')}>传参</button>
</div> //传参方：?分割参数 参数用&连接多个参数
import { useSearchParams } from "react-router-dom"
const Article = ()=>{
const [params] = useSearchParams()
const id= params.get('id')
const name= params.get('name')
return <>
<div>
{id} + {name}
</div>
</>
}
export default Article2.params传参
const router = createBrowserRouter([
{
path : '/login',
element : <Login></Login>
},
{
path : '/article/:id/:name', //添加参数占位符
element : <Article></Article>
}
]) <button onClick={()=>navigate('/article/1001/jack')}>params传参</button> //直接/+参数值
import { useParams, useSearchParams } from "react-router-dom"
const Article = ()=>{
const params = useParams()
const id = params.id
const name = params.name
return <>
<div>
{id} + {name}
</div>
</>
}
五、嵌套式路由
1.实现步骤
（1）使用children属性配置路由嵌套关系
const router = createBrowserRouter([
{
path : '/',
element : <Layout></Layout>,
children :[{
path : '/board',
element : <Board></Board>
},
{
path : '/about',
element : <About></About>
}]
},
{
path : '/login',
element : <Login></Login>
},
{
path : '/article/:id/:name',
element : <Article></Article>
}
])（2）使用<Outlet/>组件配置二级路由渲染位置
import { Link,Outlet } from "react-router-dom"
const Layout= ()=>{
return <>
<div>
我是一级组件Layout
</div>
<div>
<Link to='/board'> 面板</Link>
<Link to='/about'> 关于</Link>
</div>
{/* 配置二级路由的出口 */}
<Outlet></Outlet>
</>
}
export default Layout2.默认二级路由
{
path : '/',
element : <Layout></Layout>,
children :[{
index:true, //1.加index:true
element : <Board></Board>
},
{
path : '/about',
element : <About></About>
}]
},
const Layout= ()=>{
return <>
<div>
我是一级组件Layout
</div>
<div>
<Link to='/'> 面板</Link> //2.路径修改/
<Link to='/about'> 关于</Link>
</div>
{/* 配置二级路由的出口 */}
<Outlet></Outlet>
</>
}六、404路由配置
说明：当浏览器输入url路径在整个路由配置中都找不到对应的path，为了用户体验，展示404进行渲染
const router = createBrowserRouter([
{
path : '/',
element : <Layout></Layout>,
children :[{
index:true,
element : <Board></Board>
},
{
path : '/about',
element : <About></About>
}]
},
{
path : '*',
element: <NotFound></NotFound>
} //添加NotFound组件 使用*配置
])七、路由模式
1.hash ：由react-dom中 createHashRouter创建（底层：监听hashChange事件）
2.history：使用react-dom中 createBrowerRouter创建（底层：history对象+pushState事件）需要后端支持
