react实例与总结(二)

news2025/2/21 20:15:49

目录

一、脚手架基础语法(16~17)

1.1、hello react

1.2、组件样式隔离(样式模块化)

1.3、react插件

二、React Router v5

2.1、react-router-dom相关API

2.1.1、内置组件

2.1.1.1、BrowserRouter

2.1.1.2、HashRouter

2.1.1.3、Route

2.1.1.4、Redirect

2.1.1.5、Link

2.1.1.6、NavLink

2.1.1.7、Switch

2.1.2、其它

2.1.2.1、history对象

2.1.2.2、match对象

2.1.2.3、withRouter对象

2.2、向路由组件传参

2.2.1、传递params参数

2.2.2、传递search参数

2.2.3、传递state参数

2.3、编程式路由导航跳转

三、React Router v6

3.1、一级路由

3.2、重定向

3.3、NavLink高亮

3.4、useRoutes

3.5、嵌套路由

3.6、路由传参

3.6.1、params

3.6.2、search

3.6.3、state

3.7、编程式路由导航

3.8、use拓展

四、V6 pk V5

一、脚手架基础语法(16~17)

1.1、hello react

1.2、组件样式隔离(样式模块化)

已知：vue2通过scoped来防止组件样式冲突

react解决方法：样式模块化(CSS Modules)

使用方法：
1、将 CSS 文件命名为 [name].module.css。
2、在组件中导入样式模块，并使用对象属性访问样式类名。

import "./hello.css";//直接引入
import styles from "./hello.module.css";//样式模块化
<h2 className={styles.title}>hello react！</h2>

补充：Styled Components、Emotion、Shadow DOM 和 CSS 命名空间等方案也可以。

1.3、react插件

VScode插件搜索react：ES7+ React/Redux/React-Native snippets

输入rcc：类组件   rfc：函数组件回车即可

更多快捷代码块：vscode-react-javascript-snippets/docs/Snippets.md at 185bb91a0b692c54136663464e8225872c434637 · r5n-labs/vscode-react-javascript-snippets · GitHub

二、React Router v5

1、SPA：单页面应用

      (1)、点击页面中的链接不会刷新页面，只做页面的局部刷新

      (2)、数据都通过ajax请求获取，并在前端异步展现

2、路由：一个路由就是一个映射关系(key:value)

      key为路径,value可能是function【后端路由】或component【前端路由】

      前端：当浏览器的path变为/XX时，当前路由组件就会变为XX组件，依赖浏览器的 hash 或 history API来管理 URL 状态。

2.1、react-router-dom相关API

下载：npm i react-router-dom@5

路由组件和一般组件接收的props不同，前者会接收到三个history、location、match固定属性。

2.1.1、内置组件

import { BrowserRouter as Router, Route, Switch, Redirect,Link } from 'react-router-dom'
export default class App extends Component {
    render() {
        return (
            <div>
                <Router>
{/* Switch虽然在v5版本不是必须的，但是基本都会用到，只让页面匹配上一个，不能匹配上多个 */}
                    <Switch>
<Route path='/' exact render={() => <Redirect to='/index'></Redirect>}></Route>
<Route path='/index' render={(props) => {
//想要进入到主页，如果此时还未登录就重定向到登录页，如果已经登陆了就进入首页
                            if (isLogin()) {
// Home组件并不是路由组件，render的函数式组件才是真正的路由组件，需要把props的内容传到Home组件中。
                                return <Home {...props}></Home>
                            } else {
                                return <Redirect to='/login'></Redirect>
                            }
}}></Route>
<Route path='/login' render={(props) => {
                            if (isLogin()) {
                                return <Redirect to='/index/home'></Redirect>
                            } else {
                                return <Login {...props}></Login>
                            }
}}></Route>
                    </Switch>
     <div className="left-side">
          <Link to="/about">About</Link>
          <Link to="/home">Home</Link>
     </div>
     <div className="right-content">
          <Route path="/about" component={About}></Route>
          <Route path="/home" component={Home}></Route>
     </div>
                </Router>
            </div>
        )
    }
}
2.1.1.1、BrowserRouter

使用 HTML5 history API 来保持URL 路径不带 #，适合现代 Web 应用

2.1.1.2、HashRouter

使用 # 来管理 URL，适合不支持HTML5 history API的老版本浏览器,刷新后会导致路由参数丢失

2.1.1.3、Route

<Route> ：用于定义路径和对应组件的基本单元

<Route path="/home" component={<Home />} />
2.1.1.4、Redirect

重定向：<Redirect to='/index'></Redirect>

2.1.1.5、Link

它是React Router提供的用于页面跳转的组件，类似于HTML的<a>标签，但不会引起页面刷新

2.1.1.6、NavLink

特殊的<Link>，添加了活动样式(activeClassName)，通过this.props.children获取标签体内容

<NavLink to="/home" activeClassName="active">Go to Home</NavLink>
2.1.1.7、Switch

只让页面匹配上一个，不能匹配上多个，提高路由匹配效率

拓展：

        路由默认使用模糊匹配，如果开启严格匹配【exact={true}】的话，有时会导致无法继续匹配二级路由，不要随便开启。

2.1.2、其它

2.1.2.1、history对象

管理浏览器的会话历史。例如推送新的路径、替换当前路径和返回上一页等处理导航的方法。

 const history = useHistory();
  const handleNavigation = () => {
    history.push('/new-path'); // 导航到新的路径
  };
2.1.2.2、match对象

包含了与当前路由匹配的信息，它通常在路由组件中作为 props 传递。

const User = ({ match }) => {
  return <div>User ID: {match.params.userId}</div>;
};
const App = () => (
  <Route path="/users/:userId" component={User} />
);
2.1.2.3、withRouter对象

高阶组件，用于将history、location 和match对象作为props传递给包装的组件，将一般组件加工，让其具备路由组件所特有的API。

const MyComponent = ({ history, location, match }) => {
  const handleNavigation = () => {
    history.push('/new-path'); // 导航到新的路径
  };
  return (
    <div>
      <h1>Current Path: {location.pathname}</h1>
      <button onClick={handleNavigation}>Go to New Path</button>
    </div>
  );
};
export default withRouter(MyComponent);

类组件应用路由跳转：

import React from 'react';
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
  handleNavigate = () => {
    const { history } = this.props;
    history.push('/new-route');
  };
  render() {
    return (
      <div>
        <button onClick={this.handleNavigate}>Go to New Route</button>
      </div>
    );
  }
}
export default withRouter(MyComponent);

2.2、向路由组件传参

2.2.1、传递params参数

类组件 ：

函数组件：

const User = ({ match }) => {
  const { userId } = match.params;
  return <div>User ID: {userId}</div>;
};

2.2.2、传递search参数

类组件 ：

函数组件：

import { useLocation } from 'react-router-dom';
const User = () => {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const name = searchParams.get('name');
  const age = searchParams.get('age');
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

2.2.3、传递state参数

类组件：

函数组件：

import { useLocation } from 'react-router-dom';
const User = () => {
  const location = useLocation();
  const { id,title } = location.state || {};
  return (
    <div>
      <p>From Dashboard: {id}---{title}</p>
    </div>
  );
};

总结：

1、params：通过路由路径传递参数，使用match.params接收。
2、search：通过查询字符串传递参数，使用location.search和qs.parse【基于类组件】、location.search和URLSearchParams【基于函数组件】接收。
3、state：通过history.push或Link的to属性传递任意对象，使用location.state接收。

补充：useHistory、useLocation、useParams等Hook在React 16.8之后才可用,并通过withRouterHOC进行路由的高阶组件包装。

2.3、编程式路由导航跳转

函数组件：

import React from 'react';
import { useHistory } from 'react-router-dom';
const MyComponent = () => {
  const history = useHistory(); // 获取 history 对象
  const handleNavigate = () => {
    history.push('/new-route');
  };
  return (
    <div>
      <button onClick={handleNavigate}>Go to New Route</button>
    </div>
  );
};
export default MyComponent;

类组件：

<button onClick={() => this.pushShow(item.id, item.title)}>push查看</button>
<button onClick={() => this.replaceShow(item.id, item.title)}>replace查看</button>
replaceShow = (id, title) => {
    this.props.history.replace(`/homes/message/detail/${id}/${title}`);
    this.props.history.replace(`/homes/message/detail/?id=${id}/title=${title}`);
    this.props.history.replace(`/homes/message/detail`,{id,title});
  };
pushShow = (id, title) => {
    this.props.history.push(`/homes/message/detail/${id}/${title}`);
    this.props.history.push(`/homes/message/detail/?id=${id}/title=${title}`);
    this.props.history.push(`/homes/message/detail`,{id,title});
  };

三、React Router v6

下载：npm i react-router-dom@6

3.1、一级路由

Routes：它用来包裹所有的<Route>，并且确保只渲染匹配的第一个 <Route>

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

3.2、重定向

<Route path="/" element={<Navigate to="/about" />}></Route>

3.3、NavLink高亮

function computedClassName({ isActive }) {
		return isActive ? "list-item active" : "list-item";
}
<NavLink className={computedClassName} to="/about">About</NavLink>
<NavLink className={computedClassName} to="/homes">Home</NavLink>

3.4、useRoutes

3.5、嵌套路由

<Outlet />是一个占位符组件，用来渲染匹配的子路由的内容，父路由通常会渲染一个包含 <Outlet /> 的组件，这样它就可以根据当前的 URL 渲染子路由对应的组件。

3.6、路由传参

3.6.1、params

<Route path="/user/:id" element={<UserProfile />} />
// UserProfile 组件中接收 params 参数
import { useParams } from 'react-router-dom';
const UserProfile = () => {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
};

3.6.2、search

	const [searchParams] = useSearchParams();
	const q = searchParams.get("q"); // 获取查询参数 'q'
	const page = searchParams.get("page"); // 获取查询参数 'page'
	return (
		<div>
			<h1>搜索结果</h1>
			<p>查询关键词：{q}</p>
			<p>当前页码：{page}</p>
		</div>
	);
<Link to="/search?keyword=react">搜索React</Link>
// 在组件中接收查询参数
import { useLocation } from 'react-router-dom';
const Search = () => {
  const location = useLocation();
  const query = new URLSearchParams(location.search);
  const keyword = query.get("keyword");
  return <div>搜索关键词：{keyword}</div>;
};

3.6.3、state

<Link to={{ pathname: '/detail', state: { id: 1, name: 'React' } }}>详情</Link>
// 在目标组件中接收 state 参数
import { useLocation } from 'react-router-dom';
const Detail = () => {
  const location = useLocation();
  const { id, name } = location.state || {};
  return (
    <div>
      <p>ID：{id}----------名称：{name}</p>
    </div>
  );
};

总结：

1、params：通过路由路径传递参数，使用useParams钩子接收。
2、search：通过查询字符串传递参数，使用useSearchParams或者useLocation和URLSearchParams解析。
3、state：通过Link或useNavigate传递状态参数，使用useLocation.state 来接收。

3.7、编程式路由导航

 const navigate = useNavigate();
  const handleClick = () => {
    // 导航到 "/about" 页面，state参数写在对象里，params与search参数之间写url里
    navigate('/about', { state: { fromDashboard: true } });
  };

3.8、use拓展

useInRouterContext：检查组件是否在路由上下文中。
useNavigationType：获取当前导航类型（POP、PUSH、REPLACE）。
useOutlet：在父路由中渲染子路由的元素。
useResolvedPath：解析路径并返回路径对象

四、V6 pk V5

V6相比V5,进行了以下改动：

1、Routes代替了Switch、Navigate代替了Redirect；
2、useNavigate代替了useHistory，新增useParams、useLocation等，官方推荐函数组件。
3、路由匹配变得更精确，支持嵌套路由和动态路由的定义。
4、Route 组件的 API 也发生了改变，不再需要 component 或 render 属性，使用element 属性来传递渲染的组件。

若项目使用的是React 16.3 ~16.7，只能使用React Router v5。
若项目使用的是 React 16.8 或更高版本，可以选择React Router v5或React Router v6，但建议使用v6，因为它包含了最新的功能和更简洁的 API。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

巧用GitHub的CICD功能免费打包部署前端项目

巧用GitHub的CICD功能免费打包部署前端项目

近年来&#xff0c;随着前端技术的发展&#xff0c;前端项目的构建和打包过程变得越来越复杂&#xff0c;占用的资源也越来越多。我有一台云服务器&#xff0c;原本打算使用Docker进行部署&#xff0c;以简化操作流程。然而&#xff0c;只要执行sudo docker-compose -f deploy/…
阅读更多...
使用 DeepSeek 生成商城流程图

使用 DeepSeek 生成商城流程图

步骤 1.下载 mermaid 2.使用 DeepSeek 生成 mermaid 格式 3.复制内容到 4.保存备用。 结束。
阅读更多...
VSCode自定义快捷键和添加自定义快捷键按键到状态栏

VSCode自定义快捷键和添加自定义快捷键按键到状态栏

VSCode自定义快捷键和添加自定义快捷键按键到状态栏 &#x1f4c4;在VSCode中想实现快捷键方式执行某些指令操作&#xff0c;可以通过配置组合式的键盘按键映射来实现&#xff0c;另外一种方式就是将执行某些特定的指令嵌入在面板菜单上&#xff0c;在想要执行的时候&#xff0…
阅读更多...
Ubuntu22.04 - gflags的安装和使用

Ubuntu22.04 - gflags的安装和使用

目录 gflags 介绍gflags 安装gflags 使用 gflags 介绍 gflags 是Google 开发的一个开源库&#xff0c;用于 C应用程序中命令行参数的声明、定义和解析。gflags 库提供了一种简单的方式来添加、解析和文档化命令行标志(flags),使得程序可以根据不同的运行时配置进行调整。 它具…
阅读更多...
java | MyBatis-plus映射和golang映射对比

java | MyBatis-plus映射和golang映射对比

文章目录 Java实体类和数据库的映射1.默认驼峰命名规则2.自定义字段映射3.关闭驼峰命名规则4.JSON序列化映射 Golang1. 结构体与表的映射2. 字段与列的映射3. 关联关系映射4. 其他映射相关标签 这篇也是做数据库映射方面的对比&#xff1a; Java 实体类和数据库的映射 1.默认…
阅读更多...
正则表达式–断言

正则表达式–断言

原文地址&#xff1a;正则表达式–断言 – 无敌牛 欢迎参观我的个人博客&#xff1a;正则表达式特殊字符 – 无敌牛 断言assertions 1、(?...)&#xff1a;正向预查&#xff08;positive lookahead&#xff09;&#xff0c;表示某个字符串后面应该跟着什么。但这个字符串本身…
阅读更多...
电脑想安装 Windows 11 需要开启 TPM 2.0 怎么办？

电脑想安装 Windows 11 需要开启 TPM 2.0 怎么办？

尽管 TPM 2.0 已经内置在许多新电脑中&#xff0c;但很多人并不知道如何激活这一功能&#xff0c;甚至完全忽略了它的存在。其实&#xff0c;只需简单的几步操作&#xff0c;你就能开启这项强大的安全特性&#xff0c;为你的数字生活增添一层坚固的防护屏障。无论你是普通用户还…
阅读更多...
QT之改变鼠标样式

QT之改变鼠标样式

QT改变鼠标图片 资源路径如下 代码实现 QPixmap customCursorPixmap(":/images/mouse.png");QCursor customCursor(customCursorPixmap);QWidget::setCursor(customCursor); // 可以设置为整个窗口或特定控件QWidget::setCursor(); // 设置为透明光标&#xff0c…
阅读更多...
ue----git局域网内部署裸仓库，别的机器进行访问

ue----git局域网内部署裸仓库，别的机器进行访问

最近由于经常迁移项目到另一台机器上进行部署更新一点就要整个迁移 弄得麻烦了 就在网上学了一下这个方式 首先我们在想要建立裸仓库的电脑上找到一个文件夹放置我们的裸仓库 在此点击鼠标右键选择 open git bash here 输入命令 创裸仓库 git init --bare gitTestName.git…
阅读更多...
PaddlePaddle的OCR模型转onnx-转rknn模型_笔记4

PaddlePaddle的OCR模型转onnx-转rknn模型_笔记4

一、PaddlePaddle的OCR模型转onnx 1、首先建立一个新的虚拟环境 conda create -n ppocr python3.10 -y conda activate ppocr 2、进入paddlepaddle官网输入以下指令安装paddlepaddle GPU版本 &#xff08;我的cuda版本是11.8,根据你电脑装合适版本&#xff09; pip instal…
阅读更多...
【大模型系列篇】DeepSeek-R1如何通过强化学习有效提升大型语言模型的推理能力？

【大模型系列篇】DeepSeek-R1如何通过强化学习有效提升大型语言模型的推理能力？

如何通过强化学习&#xff08;RL&#xff09;有效提升大型语言模型&#xff08;LLM&#xff09;的推理能力&#xff1f; 《DeepSeek-R1: Incentivizing Reasoning Capability in LLMs via Reinforcement Learning》由DeepSeek-AI团队撰写&#xff0c;主要介绍了他们开发的第一代…
阅读更多...
企业存储系统

企业存储系统

一、概述 数字经济 人类通过大数据&#xff08;数字化的知识与信息&#xff09;的识别—选择—过滤—存储—使用&#xff0c;引导、实现资源的快速优化配置与再生&#xff0c;实现经济高质量发展的经济形态。 产业互联网推动发展 企业开始进行数字化转型&#xff0c;将传统…
阅读更多...
数据结构系列一：初识集合框架+复杂度

数据结构系列一：初识集合框架+复杂度

前言 数据结构——是相互之间存在一种或多种特定关系的数据元素的集合。数据结构是计算机专业的基础课程&#xff0c;但也是一门不太容易学好的课&#xff0c;它当中有很多费脑子的东西&#xff0c;之后在学习时&#xff0c;你若碰到了困惑或不解的地方 都是很正常的反应&…
阅读更多...
Linux系统编程学习 NO.14——缓冲区的概念、模拟实现Cstdio库

Linux系统编程学习 NO.14——缓冲区的概念、模拟实现Cstdio库

用户缓冲区 先介绍一下关于用户缓冲区的周边知识。 fread和fwrite的返回值 谈一谈fread和fwrite的返回值&#xff0c;如果写入/读取文件成功&#xff0c;fread或fwrite的返回值指的是实际写入/读取的内存块数量(实际的nmemb的大小)。假如fwrite写入的size是5字节&#xff0c;…
阅读更多...
某手sig3-ios算法 Chomper黑盒调用

某手sig3-ios算法 Chomper黑盒调用

Chomper-iOS界的Unidbg 最近在学习中发现一个Chomper框架&#xff0c;Chomper 是一个模拟执行iOS可执行文件的框架&#xff0c;类似于安卓端大名鼎鼎的Unidbg。 这篇文章使用Chomper模拟执行某手的sig3算法&#xff0c;初步熟悉该框架。这里只熟悉模拟执行步骤以及一些常见的…
阅读更多...
MySQL版本选择与安装

MySQL版本选择与安装

MySQL版本选择与安装 MySQL 5.5 优点: 稳定性&#xff1a;5.5版本是长期支持&#xff08;LTS&#xff09;版本&#xff0c;因此它非常稳定&#xff0c;被广泛部署在生产环境中。 兼容性&#xff1a;与旧版本的MySQL和各种应用程序有很好的兼容性。 缺点: 过时&#xff1a;…
阅读更多...
【飞行器原理学习】——1. 机翼及机翼参数

【飞行器原理学习】——1. 机翼及机翼参数

飞行器原理学习——1.机翼 一、 概述 飞机的各种机翼是飞机的控制面 通过铰链、钢索、液压等方式连接在机身上 操纵面运动时&#xff0c;会改变机翼的弧度和形状&#xff0c;使流经的空气发生偏转&#xff0c;从而影响空气动力的大小。使飞机围绕着3轴运动 二、机翼的操纵面…
阅读更多...
TS语言自定义脚手架

TS语言自定义脚手架

初始化 新建文件夹初始化命令 npm init -ytsc --initnpm i types/nodenpm i typescript# 处理别名npm i -D tsc-alias -y 表示选项都为yes 安装ts相关依赖 新建相关文件 bin 文件夹 src文件夹 commands 文件夹 &#xff08;命令 utils 文件夹 (封装方法&#xff09; index.t…
阅读更多...
lab4 CSAPP：Cachelab

lab4 CSAPP：Cachelab

写在前面 最简单的一集 实验室分为两个部分。在A部分中&#xff0c;实现一个缓存模拟器。在B部分中&#xff0c;编写一个矩阵针对高速缓存性能优化的转置功能。 感觉是比较经典的问题&#xff0c;之前在体系结构的课程中接触过&#xff0c;终于能通过lab实操一下了。 实验目…
阅读更多...
VScode C语言学习开发环境；运行提示“#Include错误，无法打开源文件stdio.h”

VScode C语言学习开发环境；运行提示“#Include错误，无法打开源文件stdio.h”

C/C环境配置 参考&#xff1a; VS Code 配置 C/C 编程运行环境&#xff08;保姆级教程&#xff09;_vscode配置c环境-CSDN博客 基本步骤 - 安装MinGW-W64&#xff0c;其包含 GCC 编译器&#xff1a;bin目录添加到环境变量&#xff1b;CMD 中输入gcc --version或where gcc验证…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023