react路由总结

目录

一、脚手架基础语法(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.searchqs.parse【基于类组件】、location.searchURLSearchParams基于函数组件接收。
3、state:通过history.pushLink的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或者useLocationURLSearchParams解析。
3、state:通过LinkuseNavigate传递状态参数,使用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 v5React Router v6,但建议使用v6,因为它包含了最新的功能和更简洁的 API。

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

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

相关文章

JAVA最新版本详细安装教程(附安装包)

目录 文章自述 一、JAVA下载 二、JAVA安装 1.首先在D盘创建【java/jdk-23】文件夹 2.把下载的压缩包移动到【jdk-23】文件夹内&#xff0c;右键点击【解压到当前文件夹】 3.如图解压会有【jdk-23.0.1】文件 4.右键桌面此电脑&#xff0c;点击【属性】 5.下滑滚动条&…

拆解微软CEO纳德拉战略蓝图:AI、量子计算、游戏革命如何改写未来规则!

2025年2月19日 知名博主Dwarkesh Patel对话微软CEO萨蒂亚纳德拉 在最新访谈释放重磅信号&#xff1a;AI将掀起工业革命级增长&#xff0c;量子计算突破引爆材料科学革命&#xff0c;游戏引擎进化为世界模拟器。 整个视频梳理出几大核心观点&#xff0c;揭示科技巨头的未来十年…

记录此刻:历时两月,初步实现基于FPGA的NVMe SSD固态硬盘存储控制器设计!

背景 为满足实验室横向项目需求&#xff0c;在2024年12月中下旬导师提出基于FPGA的NVMe SSD控制器研发项目。项目核心目标为&#xff1a;通过PCIe 3.0 x4接口实现单盘3000MB/s的持续读取速率。 实现过程 调研 花了半个月的时间查阅了一些使用FPGA实现NVME SSD控制器的论文、…

Grok 3与GPT-4.5的“智能天花板”争夺战——谁才是大模型时代的算力之王?

2025年2月18日&#xff0c;马斯克旗下 xAI 高调发布新一代大模型Grok 3&#xff0c;号称“地球上最聪明AI”&#xff0c;在数学推理、代码生成等核心能力上碾压 GPT-4o、DeepSeek-V3 等对手。而就在同一天&#xff0c;OpenAI创始人 Sam Altman 暗示 GPT-4.5 即将登场&#xff0…

Window电脑中 Linux 系统配置VMware固定IP【最新详细】

一、为什么需要固定IP 当前我们虚拟机的Linux操作系统&#xff0c;其IP地址是通过DHCP服务获取的&#xff0c;DHCP&#xff1a;动态获取IP地址,即每次重启设备后都会获取一次&#xff0c;可能导致IP地址频繁变更。 原因1&#xff1a;办公电脑IP地址变化无所谓&#xff0c;但是…

网络安全高级软件编程技术

安全软件开发入门 软件安全问题 有趣的《黑客帝国》终极解释&#xff1a; 《黑客帝国》故事里面的人物关系&#xff0c;就像电脑里面的各种程序的关系一样&#xff1a; 电脑里面的系统程序&#xff1a;Matrix&#xff1b; 病毒程序&#xff1a;以Neo为首的人类&#xff1b; …

【AI学习笔记】2月10日李飞飞巴黎AI峰会演讲:探索 AI 的历史、现状与未来

【AIGC学习笔记】2月10日李飞飞巴黎AI峰会演讲&#xff1a;探索 AI 的历史、现状与未来 AI 的历史根基与发展历程 生命起源与智能诞生&#xff1a;5 亿年前视觉概念的出现推动了智能的诞生。最初的感知仅仅是被动的体验&#xff0c;只是但随着神经系统的活跃&#xff0c;视觉…

一文读懂Docker之Docker Compose

目录 一、Docker Compose简介 二、Docker Compose的安装和基本使用 1、Docker Compose的安装 步骤一、下载docker-compose 步骤二、新增可执行权限 步骤三、查看是否安装成功 2、Docker Compose的基本使用 (1)、docker-compose up (2)、docker-compose ps (3)、docke…

算法常见八股问题整理

1.极大似然估计和交叉熵有什么关系 在分类问题中&#xff0c;当我们使用softmax函数作为输出层时&#xff0c;最大化对数似然函数实际上等价于最小化交叉熵损失函数。具体来说&#xff0c;在多分类情况下&#xff0c;最大化该样本的对数似然等价于最小化该样本的交叉熵损失。 交…

自注意力机制和CNN的区别

CNN&#xff1a;一种只能在固定感受野范围内进行关注的自注意力机制。​CNN是自注意力的简化版本。自注意力&#xff1a;具有可学习感受野的CNN。自注意力是CNN的复杂形态&#xff0c;是更灵活的CNN&#xff0c;经过某些设计就可以变为CNN。 越灵活、越大的模型&#xff0c;需要…

书生大模型实战营14-MindSearch深度解析实践

文章目录 L2——进阶岛MindSearch深度解析实践1 MindSearch 简介2 开发环境配置2.1. 打开codespace主页&#xff0c;选择Blank模板进行创建2.2. 创建conda环境隔离并安装依赖 3. 获取硅基流动API KEY4. 启动MindSearch4.1. 启动后端4.2. 启动前端 5. 部署到自己的 HuggingFace …

【Linux系统】—— 冯诺依曼体系结构与操作系统初理解

【Linux系统】—— 冯诺依曼体系结构与操作系统初理解 1 冯诺依曼体系结构1.1 基本概念理解1.2 CPU只和内存打交道1.3 为什么冯诺依曼是这种结构1.4 理解数据流动 2 操作系统2.1 什么是操作系统2.2 设计OS的目的2.3 操作系统小知识点2.4 如何理解"管理"2.5 系统调用和…

luci界面开发中的MVC架构——LuCI介绍(二)

想要给openwrt开发应用&#xff0c;虽然直接可执行程序也可以运行&#xff0c;但是没有UI会很不方便&#xff0c;想要开发UI就要用openwrt的那一套&#xff0c;自然就是LuCI&#xff0c;LuCI又用了一套MVC框架&#xff0c;今天就讲讲这是个什么东西。 OpenWrt LuCI 界面开发中…

zyNo.25

SSRF漏洞 在了解ssrf漏洞前先了解curl命令的使用 1.curl命令的使用 基本格式&#xff1a;curl<参数值>请求地址 get请求&#xff1a;curl http://127.0.0.1 post请求&#xff1a;curl -X POST -d "a1&b2" http://127.0.0.1/(其中&#xff0c;使用-X参…

2.19学习(php文件后缀)

misc buu-后门查杀 下载附件&#xff0c;我们用火绒安全扫一下然后点击详情进入该文件所在文件夹&#xff0c;再用记事本打开该文件&#xff0c;搜索flag无果&#xff0c;再试试pass&#xff08;由题目中的密码联系到pass&#xff0c;password&#xff0c;key等&#xff09;&a…

浅谈 Redis 主从复制原理(二)

大家好&#xff0c;我是此林。 【浅谈 Redis 主从集群原理&#xff08;一&#xff09; 】 上一篇文章中&#xff0c;说到了 Redis 主从复制的全量同步和增量同步&#xff0c;repl_baklog 复制缓冲区&#xff0c;以及 slave 挂掉之后数据同步的措施。 下面介绍的上一篇遗留问…

接雨水的算法

题目 代码 # 接雨水算法 def trap(height):# 1. 特殊情况&#xff1a;数组为空 则返回0if not height:return 0n len(height)# 2. 初始化左右指针&#xff0c;左右最大值&#xff0c;结果left, right 0, n - 1# maxleft代表左边最大值&#xff0c;maxright代表右边最大值max…

【C++】list 链表的使用+模拟实现

目录 文章目录 前言 一、list的简介 二、list的使用方法 三、list的模拟实现 1.基本框架&#xff1a; 2.迭代器实现 3.常用接口实现 四、完整代码 总结 前言 本文主要介绍C【STL】容器中的 list&#xff0c;包括接口说明和模拟实现。其中讲解了迭代器功能上的分类&am…

Python游戏编程之赛车游戏6-2

3.2 move()方法的定义 Player类的move()方法用于玩家控制汽车左右移动&#xff0c;当玩家点击键盘上的左右按键时&#xff0c;汽车会相应地进行左右移动。 move()方法的代码如图7所示。 图7 move()方法的代码 其中&#xff0c;第20行代码通过pygame.key.get_pressed()函数获…

RT-Thread+STM32L475VET6——ADC采集电压

文章目录 前言一、板载资源二、具体步骤1.打开CubeMX进行配置1.1 使用外部高速时钟&#xff0c;并修改时钟树1.2 打开ADC1的通道3&#xff0c;并配置为连续采集模式(ADC根据自己需求调整&#xff09;1.3 打开串口1.4 生成工程 2. 配置ADC2.1 打开ADC驱动2.2 声明ADC2.3 剪切stm…