React-Router学习
声明式导航:
声明式导航是指通过在模板中通过<Link /> 组件描述出要跳转到哪里去,比如后台管理系统的左侧菜单通过使用这种方式进行
jsx
<Link to="/home"></Link>
语法说明:
通过给组件的to属性指定要跳转到路由path, 组件会被渲染位浏览器支持的a链接,如果需要传参直接 通过字符串拼接的方式拼接参数即可
编程式导航
编程式导航是通过useNavigate 钩子得到导航方法, 然后通过调用方法以命令式的形式进行路由跳转
比如:
- 想在登录请求完毕之后,跳转到首页面,就可以选择这种方式,更加
灵活
jsx
import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); {/* 命令式导航路由 */} <button onClick={()=>{navigate('/article')}}>跳转到文章页面</button>
导航传参
1. useSearchParams 传参
传递参数 以及目标路由接收参数的方式
传递参数
jsx
{/* 带参导航路由 */} <button onClick={()=>{navigate('/article?id=1002&name=jack')}}>带参导航路由</button>
目标路由接收参数的方式
jsx
import { useSearchParams } from "react-router-dom"; // 该方法会返回一个数组 数组里面有一个固定的对象 params const [params] = useSearchParams(); const id = params.get("id"); // 1002
2. params 传参
1. 传递参数的方式
pages / login / index.jsx
jsx
{/* {parmas 带参导航路由} */} {/* {这里/1002/jack} 注意需要在路由那边正确配置一下, 和这个传递的参数达到一致才能正确匹配到路由 */} <button onClick={()=>{navigate('/article/1002/张三')}}>parmas</button>
2. 先去router里面进行占位符的配置
router/index.jsx
jsx
const router = createBrowserRouter([ { path: "/article/:id/:name", Component: Article, }, { path: "/login", Component: Login, }, ]);
3. 目标路由接收参数的方式
pages / article / index.jsx
jsx
// 导入useParams import { useSearchParams, useParams } from "react-router-dom"; // 创建实例 const params1 = useParams(); // 从实例身上 拿到id字段 const id1 = params1.id; // 从实例身上 拿到name字段 const name1 = params1.name;
嵌套路由配置
在一级路由里面又内嵌入其他路由,这种关系就叫做嵌套路由,嵌套指一级路由内又称作二级路由,例如:
嵌套路由
jsx
const router = createBrowserRouter([ { path: "/", /* AuthRoute({children}) */ /* <AuthRoute>{children}</AuthRoute> */ element: <AuthRoute> {<Layout />}</AuthRoute>, children: [ { index: true, element: <Suspense fallback={'加载中'}><Home /></Suspense> }, { path: 'article', element: <Suspense fallback={'加载中'}><Article /></Suspense> }, { path: 'publish', element: <Suspense fallback={'加载中'}><Publish /></Suspense> }, { path: 'zustand', element: <Suspense fallback={'加载中'}><Zustand /></Suspense> } ] }, { path: "/login", element: <Login /> } ])
默认二级路由
当访问的是一级路由时候,默认的二级路由组件可以得到渲染, 只需要在二级路由的位置去掉Path,设置index属性为true
jsx
const router = createBrowserRouter([ { path: "/", Component: layout, children: [ // 设置为二级路由,一级路由访问的时候,二级路由也可以得到渲染 { // 去掉path 添加index:true // path: "/about", index:true, Component: about, }, { path: "/board", Component: board, }, ], }, ]);
404路由配置
场景:
- 当浏览器输入的url路径在整个路由表里面找不到对应的path的下
- 为了优化用户体验,可以使用404兜底组件进行渲染
实现步骤:
- 准备一个NotFound组件
- 在路由表数组的末尾,以
*号作为路由的path 配置路由
代码:
jsx
import {NotFound} from '@/views/NotFound.jsx' ...... const router = createBrowserRouter([ ....... // 数组的末尾处 进行配置 { path: "*", Component: NotFound, }, ]);
两种路由的方式
| 模式 | 说明 |
| BrowserRouter | 使用HTML5的history API来管理浏览器历史记录。这种方式在URL中不包含“#”，并且可以在浏览器的前进和后退按钮之间导航。 |
| HashRouter | 使用URL的hash部分（即URL后面的部分）来模拟一个完整的URL路径。这种方式会创建一个URL，其中包含了"#", 并且这种方式并不涉及到浏览器的历史记录，所以不能使用浏览器的前进、后退按钮来实现页面之间的跳转。 |
