React — 路由
一、路由的使用
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 router
3.应用入口文件渲染
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 Login
2.编程式导航
说明:编程式导航是指通过‘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 Article
2.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 Layout
2.默认二级路由
{ 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事件)需要后端支持