第十二章 React 路由配置,路由参数获取

一、专栏介绍 🐶🐶

欢迎加入本专栏!本专栏将引领您快速上手React,让我们一起放弃放弃的念头,开始学习之旅吧!我们将从搭建React项目开始,逐步深入讲解最核心的hooks,以及React路由、请求、组件封装以及UI(Ant Design)框架的使用。让我们一起掌握React,开启前端开发的全新篇章!

二、什么是路由 🐭🐭

在React中,路由是用于管理应用程序中不同页面之间的切换和导航的机制。它允许开发人员根据用户在应用程序中的行为,如点击链接或提交表单,来切换不同的组件或页面。最为常见的就是我们的导航菜单,点击菜单以后现实相对应的页面。

三、安装react-router-dom依赖 🐹🐹

npm install react-router-dom --save

react-router-dom是React的一个插件库,专门用来实现单页应用(SPA)的路由管理。它提供了一组组件和API,用于构建单页应用程序的导航和路由,例如链接、路由切换、参数传递等。

通过使用react-router-dom提供的组件和API,可以定义应用程序中的不同页面和路由。这包括定义路由的路径、组件和参数等。

通过使用react-router-dom提供的导航组件,如Link和NavLink,可以在应用程序中实现页面的切换和导航。当用户点击链接或提交表单时,路由会根据定义好的路由配置进行切换。

react-router-dom还提供了参数传递的功能。可以通过定义带有参数的路由,在页面之间传递数据或参数。例如,可以在一个路由中定义一个用户ID参数,然后在另一个路由中使用该参数来获取用户信息。

四、绘制布局 🐰🐰

通常在我们的后台管理系统中,最常用的布局是上下和左右两种方式。其中,上方或左侧为菜单,下方或右侧则对应显示相应的内容。以一种常见的布局为例,即上方为导航条,左侧为菜单,右侧则为显示内容的区域。这样的布局设计能够让用户更加直观地了解系统结构,方便快捷地找到所需的功能和信息。通过合理的布局设计,可以提高用户的使用效率和满意度。

4.1、创建layout 👇👇

分别创建src/layout/Layout.tsx和src/layout/Layout.scss的文件

Layout.tsx

import React from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import './Layout.scss';const Layout: React.FC = () => {const navigate = useNavigate();const goRouter = (path: string) => {navigate(path);};return (<><div className="ts-layout"><div className="ts-layout-top">这是导航条</div><div className="ts-layout-bottom"><div className="ts-layout-menu"><button onClick={() => goRouter('/')}>首页1</button><button onClick={() => goRouter('home2/007')}>首页2</button><button onClick={() => goRouter('/home3?id=008')}>首页3</button></div><div className="ts-layout-content"><Outlet /></div></div></div></>);
};export default Layout;

Layout.scss

.ts-layout {display: flex;flex-direction: column;width: 100vw;height: 100%;.ts-layout-top {height: 40px;width: 100%;background: #ddd;}.ts-layout-bottom {height: calc(100% - 40px);width: inherit;display: flex;.ts-layout-menu {width: 120px;height: 100%;background: #bdbbbb;display: flex;flex-direction: column;align-items: center;button {width: 80%;}}.ts-layout-content {width: calc(100% - 120px);height: 100%;background: #818080;}}
}

文件目录为

4.2、创建页面 👇👇

分别创建以下三个页面

Home.tsx

import React from 'react';const Home: React.FC = () => {return (<><divstyle={{width: '100%',height: '100%',display: 'flex',alignItems: 'center',justifyContent: 'center',fontSize: '45px',}}>这里是首页Home,路由/</div></>);
};export default Home;

 Home2.tsx

import React from 'react';
import { useParams } from 'react-router-dom';const Home2: React.FC = () => {const { id } = useParams();return (<><divstyle={{width: '100%',height: '100%',display: 'flex',alignItems: 'center',justifyContent: 'center',fontSize: '45px',}}>这里是首页Home2,路由是home2,参数的id为{id}</div></>);
};export default Home2;

 Home3.tsx

import React from 'react';
import { useSearchParams } from 'react-router-dom';const Home3: React.FC = () => {const [searchParams] = useSearchParams();const paramsId = searchParams.get('id');return (<><divstyle={{width: '100%',height: '100%',display: 'flex',alignItems: 'center',justifyContent: 'center',fontSize: '45px',}}>这里是首页Home3,路由是Home3,路由的参数为{paramsId}</div></>);
};export default Home3;

4.3、创建router 👇👇

新建文件src/router/index.tsx

import { createBrowserRouter } from 'react-router-dom';
import Layout from '../layout/Layout';
import Home from '../pages/home/Home';
import Home2 from '../pages/home/Home2';
import Home3 from '../pages/home/Home3';const router = createBrowserRouter([{path: '/',element: <Layout />,children: [{path: '/',element: <Home />,},{path: 'home2/:id',element: <Home2 />,},{path: 'home3',element: <Home3 />,},],},
]);export default router;

4.4、修改App.tsx 👇👇

import React from 'react';
import { RouterProvider } from 'react-router-dom';
import router from './router';
import './global.scss';function App() {return (<div className="App"><RouterProvider router={router} /></div>);
}export default App;

五、效果 🐺🐺

六、配置404页面 🐸🐸

修改路由配置,在最后一个404页面的配置,因为我这里是demo,所有直接写了一个div,自己去扩展成组件,实现更丰富更酷炫直观的页面填充进去就可以了。

import { createBrowserRouter } from 'react-router-dom';
import Layout from '../layout/Layout';
import Home from '../pages/home/Home';
import Home2 from '../pages/home/Home2';
import Home3 from '../pages/home/Home3';
import Login from '../pages/Login';const router = createBrowserRouter([{path: '/login',element: <Login />,},{path: '/',element: <Layout />,children: [{path: '/',element: <Home />,},{path: 'home2/:id',element: <Home2 />,},{path: 'home3',element: <Home3 />,},],},{path: '*',element: <Layout />,children: [{path: '*',element: <div>404,您访问的页面不存在</div>,},],},
]);export default router;

七、总结 🐯🐯

react-router-dom是React中非常重要的一个路由管理库,对于开发React应用程序来说是很有必要学习的。

在React中,react-router-dom可以帮助我们实现页面间的跳转和导航,使得单页应用能够实现多页应用类似的切换效果。通过使用react-router-dom,我们可以定义应用程序中的不同页面和路由,并在用户进行页面跳转或导航时,控制组件的渲染和数据的传递。

学习react-router-dom可以帮助我们更好地理解和掌握React应用程序的开发和导航管理,提高开发效率和代码可维护性。特别是在构建大型复杂的单页应用程序时,路由管理的重要性更加突出。因此,对于想要深入开发React应用程序的开发者来说,学习和掌握react-router-dom是非常必要的。

👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

0基础学java-day19(IO流)

一、文件 1 什么是文件 2.文件流 3.常用的文件操作 3.1 创建文件对象相关构造器和方法 package com.hspedu.file;import org.junit.jupiter.api.DynamicTest; import org.junit.jupiter.api.Test;import java.io.File; import java.io.IOException;/*** author 林然* vers…

js根据数组对象中的某个值去重

原理&#xff1a;利用对象key-value进行去重 去重方法&#xff1a; // 数组对象根据某一个值去重 filterList(list[], key) {let obj {};list?.forEach(item>{obj[item[key]]item;});return Object.values(obj); }, 用法&#xff1a; let list [{id: 1, name: 1},{id…

【TI毫米波雷达入门-11】毫米波速度相关计算

知识回顾 傅里叶变换 信号用复数表示&#xff0c;A :振幅&#xff0c; Q &#xff1a;相位 中频 信号 中频信号的相位 中频信号的表达公式 频率和相位的表达方式 使用两个Chirp 实现单个目标的测量 两个连续的chirp &#xff0c;检测目标的相位差&#xff0c;通过速度和时间的关…

7+乳酸化+分型+实验,怎么贴合热点开展实验,这篇文章给你思路

今天给同学们分享一篇生信文章“Identification of lactylation related model to predict prognostic, tumor infiltrating immunocytes and response of immunotherapy in gastric cancer”&#xff0c;这篇文章发表在Front Immunol期刊上&#xff0c;影响因子为7.3。 结果解…

基于java的小型超市管理系统论文

摘 要 使用旧方法对超市信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在超市信息的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。 这次开发的小型超市管理系统有管理…

uniapp 数组添加不重复元素

一、效果图 二、代码 //点击事件rightBtn(sub, index) {console.log(sub, index)//uniapp 数组添加不重复元素if (this.selectList.includes(sub.type)) {this.selectList this.selectList.filter((item) > {return item ! sub.type;});} else {this.selectList.push(sub.t…

365锦鲤助手 砍价小程序源码 流量主引流裂变

源码介绍 修改版365锦鲤 助手&#xff0c; 砍价小程序源码 流量主引流裂变 拼多多商品快速丰富产品内容满足广大用户需求&#xff1b;流量矩阵让流量都进你的圈子飞起来&#xff1b;长期盈利、项目稳定 1.后台安装微擎 2安装应用 后台打包上传

23.12.10日总结

周总结 这周三的晚自习&#xff0c;学姐讲了一下git的合作开发&#xff0c;还有懒加载&#xff0c;防抖&#xff0c;节流 答辩的时候问了几个问题&#xff1a; 为什么在js中0.10.2!0.3? 在js中进行属性运算时&#xff0c;会出现0.10.20.300000000000000004js遵循IEEE754标…

【有限元仿真】or【流体仿真】

流体和刚体的关系&#xff1f; 刚体仿真关注刚性物体的运动和力学行为。刚体是指在外力作用下保持形状和结构不变的物体&#xff0c;不受弯曲或拉伸的影响。刚体仿真基于刚体力学原理和刚体运动学方程&#xff0c;模拟刚体的运动、转动、碰撞等行为。它可以用于模拟刚体之间的…

Mysql进阶-InnoDB引擎事务原理及MVCC

事务原理 事务基础 事务是一组操作的集合&#xff0c;它是一个不可分割的工作单位&#xff0c;事务会把所有的操作作为一个整体一起向系 统提交或撤销操作请求&#xff0c;即这些操作要么同时成功&#xff0c;要么同时失败。 事务的四大特性&#xff1a; 原子性&#xff08;A…

【深度学习目标检测】五、基于深度学习的安全帽识别(python,目标检测)

深度学习目标检测方法则是利用深度神经网络模型进行目标检测&#xff0c;主要有以下几种&#xff1a; R-CNN系列&#xff1a;包括R-CNN、Fast R-CNN、Faster R-CNN等&#xff0c;通过候选区域法生成候选目标区域&#xff0c;然后使用卷积神经网络提取特征&#xff0c;并通过分类…

安装Nacos2.2.3集群

目录 一、传统方式安装 二、Docker安装 一、传统方式安装 1、配置jdk环境 vi /etc/profile JAVA_HOME/usr/local/java JRE_HOME/usr/local/java/jre CLASSPATH.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib PATH$JAVA_HOME/bin:$PATH export PATH JAVA_…

用什么文件传输工具来进行企业远程文件传输好?

企业在远程文件传输工具的选择上面临一个非常实际的问题。在当今社会&#xff0c;企业间的合作、沟通和交流都离不开文件的传输。如果文件传输速度慢、不稳定、不安全&#xff0c;将直接影响企业的效率和声誉。因此&#xff0c;选择一款易用的文件传输工具至关重要。 企业远程文…

【Java8系列08】Java8中reducing妙用

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

2024年天津仁爱学院专升本专业课报名、确认缴费操作流程说明

2024年天津仁爱学院高职升本科专业考试报名、确认缴费操作流程说明 一、报名操作流程 1. 报名注册 请考生于2023年12月15日上午9点—12月20日下午16&#xff1a;00点登录天津仁爱学院报名系统 https://jw.tjrac.edu.cn/zsb&#xff0c;点击“注册”按钮后进入报名登录界面&a…

单例模式:饿汉模式、懒汉模式

目录 一、什么是单例模式 二、饿汉模式 三、懒汉模式 一、什么是单例模式 单例模式是Java中的设计模式之一&#xff0c;能够保证某个类在程序中只存在唯一一份实例&#xff0c;而不会创建出多个实例 单例模式有很多实现方式&#xff0c;最常见的是饿汉和懒汉两种模式 二、…

收货地址 不能自动获取地区,并且报错

https://www.crmeb.com/ask/thread/20527 https://www.crmeb.com/ask/thread/20527 腾讯地图申请地址&#xff1a; https://doc.crmeb.com/pro/crmebprov2/6117?search%E5%9C%B0%E5%9D%80 新建一个应用

提升数据分析效率:Amazon S3 Express One Zone数据湖实战教程

前言 什么是 Amazon S3&#xff1f;什么是 S3 Express One Zone&#xff1f;实现概述 技术架构组件实现步骤概览 第一步&#xff1a;构建数据湖的基础第二步&#xff1a;选择并查看数据集第三步&#xff1a;在 Athena 中搭建架构第四步&#xff1a;数据转换与优化第五步&#x…

STM32 map文件详解

文章目录 1. 前言2. 生成 .map 文件3 .map 文件的组成3.1 Section Cross References - 各个源文件之间函数的调用关系3.2 Removing Unused input sections from the image - 移除未使用的模块3.3 Image Symbol Table - 映射符号表&#xff1a;描述各&#xff08;程序段 / 数据&…

Spark分布式内存计算框架

目录 一、Spark简介 &#xff08;一&#xff09;定义 &#xff08;二&#xff09;Spark和MapReduce区别 &#xff08;三&#xff09;Spark历史 &#xff08;四&#xff09;Spark特点 二、Spark生态系统 三、Spark运行架构 &#xff08;一&#xff09;基本概念 &#x…