React — 路由 - Powered by Discuz! Archiver

用户若隐 發表於 2024-3-12 16:47:00

React — 路由

一、路由的使用
1.安装react-router-dom
<div class="cnblogs_code">
<pre>npm i react-router-dom </pre>
</div>
2.配置
（1）创建router实例对象并且配置路由对应关系
（2）路由绑定
<div class="cnblogs_code">
<pre>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>
);</pre>
</div>
二、路由模块封装
<img src="https://img2024.cnblogs.com/blog/1483877/202403/1483877-20240312151647368-1221332900.png">
1.创建page文件夹
<img src="https://img2024.cnblogs.com/blog/1483877/202403/1483877-20240312152602453-680303083.png">
2.创建router文件夹
<div class="cnblogs_code">
<pre>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</pre>
</div>
3.应用入口文件渲染
<div class="cnblogs_code">
<pre>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>
);</pre>
</div>
三、路由导航
1.声明式导航
说明：声明式导航是指在模板中通过<Link/>组件描述要跳转到哪里
语法：<Link to=''/article''>跳转</Link>
使用场景：菜单
<div class="cnblogs_code">
<pre>import { Link } from "react-router-dom"

const Login = ()=>{
return <>
 <div>
 Login页面
 <Link to="/article">跳转文章</Link>
 </div>

</>
}
export default Login</pre>
</div>
2.编程式导航
说明：编程式导航是指通过‘useNavigate’钩子得到导航方法，然后通过调用方法以命令的形式进行路由跳转
语法：const navigate=uaeNavigate() navigate('/article')
使用场景：登录后跳转
<div class="cnblogs_code">
<pre>import { Link,useNavigate } from "react-router-dom"
const Login = ()=>{
const navigate = useNavigate()
return <>
 <div>
 <button onClick={()=>navigate('/article')}>命令式跳转2</button>
 </div>
</>
}
export default Login</pre>
</div>
四、导航传参
1.searchParams传参
<div class="cnblogs_code">
<pre> <div>

 <button onClick={()=>navigate('/article?id=1001&name=jack哈啊哈')}>传参</button>
 </div>

//传参方：?分割参数参数用&连接多个参数</pre>
</div>
<div class="cnblogs_code">
<pre>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</pre>
</div>
2.params传参
<div class="cnblogs_code">
<pre>const router = createBrowserRouter([
{
 path : '/login',
 element : <Login></Login>
},
{
 path : '/article/:id/:name', //添加参数占位符
 element : <Article></Article>
}
])</pre>
</div>
<div class="cnblogs_code">
<pre> <button onClick={()=>navigate('/article/1001/jack')}>params传参</button> //直接/+参数值</pre>
</div>
<div class="cnblogs_code">
<pre>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>

</>
}</pre>
</div>
五、嵌套式路由
1.实现步骤
（1）使用children属性配置路由嵌套关系
<div class="cnblogs_code">
<pre>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>
}
])</pre>
</div>
（2）使用<Outlet/>组件配置二级路由渲染位置
<div class="cnblogs_code">
<pre>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</pre>
</div>
2.默认二级路由
<div class="cnblogs_code">
<pre>{
 path : '/',
 element : <Layout></Layout>,
 children :[{
 index:true, //1.加index:true
 element : <Board></Board>
 },
 {
 path : '/about',
 element : <About></About>
 }]
},</pre>
</div>
<div class="cnblogs_code">
<pre>const Layout= ()=>{
return <>
 <div>
 我是一级组件Layout
 </div>
 <div>
 <Link to='/'> 面板</Link> //2.路径修改/
 <Link to='/about'> 关于</Link>
 </div>
 {/* 配置二级路由的出口 */}

 <Outlet></Outlet>
</>
}</pre>
</div>
六、404路由配置
说明：当浏览器输入url路径在整个路由配置中都找不到对应的path，为了用户体验，展示404进行渲染
<div class="cnblogs_code">
<pre>const router = createBrowserRouter([
{
 path : '/',
 element : <Layout></Layout>,
 children :[{
 index:true,
 element : <Board></Board>
 },
 {
 path : '/about',
 element : <About></About>
 }]
},
{
 path : '*',
 element: <NotFound></NotFound>
} //添加NotFound组件使用*配置</pre>
<pre>])</pre>
</div>
七、路由模式
1.hash ：由react-dom中 createHashRouter创建（底层：监听hashChange事件）
2.history：使用react-dom中 createBrowerRouter创建（底层：history对象+pushState事件）需要后端支持
<img src="https://img2024.cnblogs.com/blog/1483877/202403/1483877-20240312164632733-70142261.png">
  
来源：https://www.cnblogs.com/qinlinkun/p/18068683

頁: [1]

琼殿技术论坛's Archiver

React — 路由