react之ReactRouter的使用

react之ReactRouter的使用

  • 一、环境搭建
  • 二、抽象路由模块
  • 三、路由导航
    • 3.1 声明式导航
    • 3.2 编程式导航
  • 四、导航传参
    • 4.1 searchParams 传参
    • 4.2 params 传参
  • 五 、嵌套路由配置
  • 六、默认二级路由
  • 七、404页面配置
  • 八、俩种路由模式

一、环境搭建

  • 1.创建项目安装依赖
npx create-react-app react-router-pro
npm i
  • 2.安装最新的 ReactRouter包
npm i react-router-dom
  • 3.启动项目
npm run start

二、抽象路由模块

在这里插入图片描述

1.创建page文件夹,并创建Login和Article组件

  • login组件
//登录页面
const Login = function () {
  const navigate = useNavigate()
  return (
    <>
      <div>
        我是登录页面
      </div>
    </>
  )
}
export default Login
  • Article组件

function Article() {
  return (
    <div>
      我是文章页面{id}={name}
    </div>
  )
}

export default Article

2.创建router文件夹=>index.js 配置路由

//路由模块

import { createBrowserRouter } from 'react-router-dom'
import Login from '../page/Login'
import Article from '../page/Article'
const router = createBrowserRouter([
  {
    path: '/login',
    element: <Login />,
  },
  {
    path: '/article',
    element: <Article />,
  },
])

//导出
export default router

3.index.js中引入路由

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import reportWebVitals from './reportWebVitals'

//路由
import { 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>
)

reportWebVitals()

三、路由导航

  • 路由系统中的多个路由之间需要进行路由跳转,并且在跳转的同时有可能需要传递参数进行通信

3.1 声明式导航

  • 声明式导航是指通过在模版中通过 组件描述出要跳转到哪里去
//登录页面
import { Link} from 'react-router-dom'
const Login = function () {
  return (
    <>
      <div>
        我是登录页面
        <Link to="/article">跳转到文章页面(声明式)</Link>
    </>
  )
}
export default Login

3.2 编程式导航

  • 编程式导航是指通过 useNavigate钩子得到导航方法,然后通过调用方法以命令式的形式进行路由跳转
//登录页面
import { useNavigate } from 'react-router-dom'
const Login = function () {
  const navigate = useNavigate()
  return (
    <>
      <div>
        我是登录页面
        <button onClick={() => navigate('/article')}>
          跳转到文章页(编程式)
        </button>
 
    </>
  )
}
export default Login

四、导航传参

4.1 searchParams 传参

传参

<button onClick={() => navigate('/article?id=100&name=jack')}>
    searchParams(传参)
</button>

接参

import { useSearchParams} from 'react-router-dom'

const [params] = useSearchParams()
const id = params.get('id')
const name = params.get('name')

4.2 params 传参

传参

<button onClick={() => navigate('/article/101/jack')}>
    useParams(传参)
</button>

路由中配置

{
    path: '/article/:id/:name',
    element: <Article />,
  },

接参

import {  useParams } from 'react-router-dom'

const params = useParams()
const id = params.id
const name = params.name

五 、嵌套路由配置

  • 在一级路由中又内嵌了其他路由,这种关系就叫做嵌套路由,嵌套至一级路由内的路由又称作二级路由

在这里插入图片描述

实现步骤

  • 1.使用 children 属性配置路由嵌套关系
{
    path: '/',
    element: <Layout />,
    children: [
      {
        path: 'board',
        element: <Board />,
      },
      {
        path: 'about',
        element: <About />,
      },
    ],
  },
  • 2.使用 <Outlet/>组件配置二级路由渲染位置
import { Link, Outlet } from 'react-router-dom'

const Layout = () => {
  return (
    <div>
      我是一级路由layout
      <br />
      <Link to="/board">面板</Link>
      <br />
      <Link to="/about">关于</Link>
      {/* 配置二级路由出口 */}
      <Outlet></Outlet>
    </div>
  )
}

export default Layout

六、默认二级路由

  • 当访问的是一级路由时,默认的二级路由组件可以得到渲染,只需要在二级路由的位置去掉path,设置index属性为true
children: [
      {
        // 设置为默认二级路由 一级路由访问 能定向到该组件
        index: true,
        element: <Board />,
      },
      {
        path: 'about',
        element: <About />,
      },
    ],
  • 跳转时路径传/
<div>
      我是一级路由layout
      <br />
      <Link to="/">面板</Link>
      <br />
      <Link to="/about">关于</Link>
      {/* 配置二级路由出口 */}
      <Outlet></Outlet>
    </div>

七、404页面配置

  • 1.准备一个404NotFound组件
const NotFound = () => {
  return <div>404页面</div>
}

export default NotFound
  • 2.. 在路由表数组的末尾,以*号作为路由path配置路由
{
    path: '*',
    element: <NotFound />,
  },

八、俩种路由模式

  • 各个主流框架的路由常用的路由模式有俩种,history模式和hash模式, ReactRouter分别由 createBrowerRouter 和 createHashRouter 函数负责创建
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/211936.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2024年美国大学生数学建模竞赛(MCM/ICM)论文写作方法指导

一、前言 谈笑有鸿儒&#xff0c;往来无白丁。鸟宿池边树&#xff0c;僧敲月下门。士为知己者死&#xff0c;女为悦己者容。吴楚东南坼&#xff0c;乾坤日夜浮。剪不断&#xff0c;理还乱&#xff0c;是离愁&#xff0c;别是一番滋味在心头。 重要提示&#xff1a;优秀论文的解…

Matlab 加权均值质心计算(WMN)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 思路很简单,即将之前的均值中心,引入相关的权重函数(通常与距离有关),以此为每个点进行赋权,最后即可得到一个加权均值中心: 二、实现代码 %% ********<

[二分查找]LeetCode2009 :使数组连续的最少操作数

本文涉及的基础知识点 二分查找算法合集 作者推荐 动态规划LeetCode2552&#xff1a;优化了6版的1324模式 题目 给你一个整数数组 nums 。每一次操作中&#xff0c;你可以将 nums 中 任意 一个元素替换成 任意 整数。 如果 nums 满足以下条件&#xff0c;那么它是 连续的 …

ChatGPT 上线一周年

一年前&#xff0c;ChatGPT 正式上线&#xff0c;这无疑是个革命性的时刻&#xff0c;仅仅 6 周&#xff0c;ChatGPT 用户量达到 1 个亿。 这一年元宇宙作为概念垃圾彻底进入下水道&#xff0c;而 ChatGPT 和 AI 则席卷全球。 仅仅这一年&#xff0c;依托于 ChatGPT&#xff…

SmartSoftHelp8,数据库事务测试工具

SQL数据库事务测试工具 SQL数据库事务回滚测试工具 下载地址&#xff1a; https://pan.baidu.com/s/1zBgeYsqWnSlNgiKPR2lUYg?pwd8888

二分查找:LeetCode2035:将数组分成两个数组并最小化数组和的差

本文涉及的基础知识点 二分查找算法合集 作者推荐 动态规划LeetCode2552&#xff1a;优化了6版的1324模式 题目 给你一个长度为 2 * n 的整数数组。你需要将 nums 分成 两个 长度为 n 的数组&#xff0c;分别求出两个数组的和&#xff0c;并 最小化 两个数组和之 差的绝对…

nodejs微信小程序+python+PHP贵州旅游系统的设计与实现-计算机毕业设计推荐MySQL

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

巧用MACD精准抄底和逃顶

一、认识MACD MACD又称平滑异同移动平均线&#xff0c;是由美国投资家杰拉尔德阿佩尔在 20 世纪 70 年代末提出的。 MACD 指标的设计基于MA均线原理&#xff0c;是对收盘价进行平滑处理&#xff08;求出加权平均值&#xff09;后的一种趋向类指标。它是股票交易中一种常见的技术…

IDEA2023安装教程(超详细)

文章目录 前言安装IntelliJ IDEA1. 下载IntelliJ IDEA2. 运行安装程序3. 选择安装路径4. 选择启动器设置5. 等待安装完成6. 启动IntelliJ IDEA7. 配置和设置8. 激活或选择许可证9. 开始使用 总结 前言 随着软件开发的不断发展&#xff0c;IntelliJ IDEA成为了许多开发人员首选…

pygame实现贪吃蛇小游戏

import pygame import random# 游戏初始化 pygame.init()# 游戏窗口设置 win_width, win_height 800, 600 window pygame.display.set_mode((win_width, win_height)) pygame.display.set_caption("Snake Game")# 颜色设置 WHITE (255, 255, 255) BLACK (0, 0, 0…

avue-tabs设置默认选中的tab

文章目录 一、问题二、解决三、最后 一、问题 最近在用avue这个UI框架来开发页面&#xff0c;有用到avue-tabs这个tab切换组件。结果竟然发现element-ui中el-tabs的v-model在avue-tabs中竟然是没有用的&#xff0c;无法设置默认选中哪个tab。avue这个基于element-ui开发的UI框…

【计算机网络笔记】802.11无线局域网

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…

制作一个RISC-V的操作系统二-RISC-V ISA介绍

文章目录 ISA的基本介绍啥是ISA为什么要设计ISACISCvsRISCISA的宽度知名ISA介绍 RISC-V历史和特点RISC-V发展RISC-V ISA 命名规范模块化的ISA通用寄存器Hart特权级别Control and Status Register&#xff08;CSR&#xff09;内存管理与保护异常和中断 ISA的基本介绍 啥是ISA …

十大经典系统架构设计面试题

十大经典系统架构设计面试题_架构_程序员石磊_InfoQ写作社区翻译自&#xff1a;https://medium.com/geekculture/top-10-system-design-interview-questions-10f7b5ea123d在我作为微软和Facebhttps://xie.infoq.cn/article/4c0c9328a725a76922f6547ad 任何 SDI 问题的提示 通过…

Elasticsearch:什么是自然语言处理(NLP)?

自然语言处理定义 自然语言处理 (natural language processing - NLP) 是人工智能 (AI) 的一种形式&#xff0c;专注于计算机和人们使用人类语言进行交互的方式。 NLP 技术帮助计算机使用我们的自然交流模式&#xff08;语音和书面文本&#xff09;来分析、理解和响应我们。 自…

OpenCV-Python:计算机视觉介绍

目录 1.背景 2.计算机视觉发展历史 3.计算机视觉主要任务 4.计算机视觉应用场景 5.知识笔记 1.背景 OpenCV是计算机视觉的一个框架&#xff0c;想要学习OpenCV&#xff0c;需要对计算机视觉有一个大致的了解。计算机视觉是指通过计算机技术和算法来模拟人类视觉系统的能力…

Go语言实现深度学习的正向传播和反向传播

文章目录 开发前言开发理论图解理论数据类型数学函数数据节点统一抽象变量数据节点常量数据节点单目运算封装双目运算封装算子节点统一抽象基础算子加法算子减法算子乘法算子除法算子指数算子对数算子正切算子正弦算子余弦算子数据流图正向传播反向传播运行示例开发总结 开发前…

甄知黄建华:从“天赋平平”到IT行业“六边形战士”,探索出企业数智化转型的“强IT”之路

本期我们先抛开人物和主体不表&#xff0c;从大环境开始谈起。随着科技的快速发展和全球商业环境的不断变化&#xff0c;中国企业对灵活性、创新性、全球化和效率的需求是迫切的&#xff0c;进行数字化转型来支撑企业的业务变革、组织优化已是业界共识。如何根据企业的实际情况…

Hdoop学习笔记(HDP)-Part.17 安装Spark2

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …

接口测试 —— Requests库介绍

1、Requests库 Requests库是用Python语言编写&#xff0c;基于urllib3模块&#xff0c;采用Apache2 Licensed开源协议的 HTTP 库。 虽然Python的标准库中urllib3模块已经包含了平常我们使用的大多数功能&#xff0c;但是它的 API使用起来让人感觉不太友好。而Requests库使用的…