React-Router 基础学习

简介: React-Router 基础学习


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兜底组件进行渲染

实现步骤:

  1. 准备一个NotFound组件
  2. 在路由表数组的末尾,以* 号作为路由的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,其中包含了"#", 并且这种方式并不涉及到浏览器的历史记录,所以不能使用浏览器的前进、后退按钮来实现页面之间的跳转。


目录
相关文章
|
2月前
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
|
3月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
91 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
3月前
|
前端开发 JavaScript
react学习(13)props
react学习(13)props
|
3月前
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
42 0
|
1月前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
43 2
|
2月前
|
资源调度 前端开发 JavaScript
React进阶学习
React进阶学习
20 1
|
3月前
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
40 3
|
2月前
|
JSON 前端开发 JavaScript
React 进阶阶段学习计划
React 进阶阶段学习计划
|
3月前
|
前端开发
react学习(17)回调形式的ref
react学习(17)回调形式的ref
|
3月前
|
前端开发
react学习(15)函数式组件中使用props
react学习(15)函数式组件中使用props