React-Router 基础学习

心安事随

发布于 2024-07-29 17:12:19

770

发布于 2024-07-29 17:12:19

文章被收录于专栏：前端大合集

React-Router学习

声明式导航:

声明式导航是指通过在模板中通过<Link /> 组件描述出要跳转到哪里去,比如后台管理系统的左侧菜单通过使用这种方式进行

 <Link to="/home"></Link>

语法说明:

通过给组件的to属性指定要跳转到路由path, 组件会被渲染位浏览器支持的a链接,如果需要传参直接 通过字符串拼接的方式拼接参数即可

编程式导航

编程式导航是通过useNavigate 钩子得到导航方法, 然后通过调用方法以命令式的形式进行路由跳转

比如:

想在登录请求完毕之后,跳转到首页面,就可以选择这种方式,更加灵活

 import { useNavigate } from "react-router-dom";
 const navigate = useNavigate();   
 {/* 命令式导航路由 */}
 <button onClick={()=>{navigate('/article')}}>跳转到文章页面</button>

导航传参

1. useSearchParams 传参

传递参数以及目标路由接收参数的方式

传递参数

 {/* 带参导航路由 */}
 <button onClick={()=>{navigate('/article?id=1002&name=jack')}}>带参导航路由</button>

目标路由接收参数的方式

 import { useSearchParams } from "react-router-dom";
 
 // 该方法会返回一个数组 数组里面有一个固定的对象 params
 const [params] = useSearchParams();
 const id = params.get("id"); // 1002

2. params 传参

1. 传递参数的方式

pages / login / index.jsx

 {/* {parmas 带参导航路由} */}
 {/* {这里/1002/jack} 注意需要在路由那边正确配置一下, 和这个传递的参数达到一致才能正确匹配到路由 */}
 <button onClick={()=>{navigate('/article/1002/张三')}}>parmas</button>

2. 先去router里面进行占位符的配置

router/index.jsx

 const router = createBrowserRouter([
   {
     path: "/article/:id/:name",
     Component: Article,
   },
   {
     path: "/login",
     Component: Login,
   },
 ]);

3. 目标路由接收参数的方式

pages / article / index.jsx

 // 导入useParams
 import { useSearchParams, useParams } from "react-router-dom";
 // 创建实例
 const params1 = useParams();
 // 从实例身上 拿到id字段
  const id1 = params1.id;
 // 从实例身上 拿到name字段
  const name1 = params1.name;

嵌套路由配置

在一级路由里面又内嵌入其他路由,这种关系就叫做嵌套路由,嵌套指一级路由内又称作二级路由,例如:

嵌套路由

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

 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 配置路由

代码:

import {NotFound} from '@/views/NotFound.jsx'
......
 const router = createBrowserRouter([
   .......
   // 数组的末尾处 进行配置
   {
     path: "*",
     Component: NotFound,
   },
 ]);

两种路由的方式

模式	说明
BrowserRouter	使用HTML5的history API来管理浏览器历史记录。这种方式在URL中不包含“#”，并且可以在浏览器的前进和后退按钮之间导航。
HashRouter	使用URL的hash部分（即URL后面的部分）来模拟一个完整的URL路径。这种方式会创建一个URL，其中包含了"#", 并且这种方式并不涉及到浏览器的历史记录，所以不能使用浏览器的前进、后退按钮来实现页面之间的跳转。