react 的 路由传参

news/2024/11/8 6:33:37/

1、路由传参

1、动态路由传参

使用prop进行接收 props.match.params.参数名

2、query传参
this.props.history.push({
pathname: ‘路由’,
query:{参数名:参数值}
})
接收:
this.props.location.query.参数名

3、state传参
this.props.history.push({
pathname: ‘路由’,
state:{参数名:参数值}
})
接收:
this.props.location.state.参数名

2、路由拦截

正常我们创建路由都是

<Route path="" component={组件}></Route>

我也可以写成

<Route path="" render={(props) => {在这里我们可以进行路由拦截,处理一些东西,判断要显示那个组件由于我们在函数中组件已经实例化,我们在其他组件中通过props进行路由跳转会发生报错,拿不到props,所以我们需要在render函数中将props传入,将props传入组件中,例如:<Clird {...props}/>,这样就可以通过props进行跳转
}}></Route>

3、路由模式

HashRouter这个是hash模式,带#号的,如果不想使用#,我们可以将HashRouter换为BrowserRouter就可以了

4、withRouter

当子组件中无法拿到props时,我们通常使用withRouter()方法进行包裹,将返回值赋予一个新变量,这个变量就是我们包裹完的新组件
将这个组件替换原来的组件就可以就

const 新组件名 = withRouter(组件名)

http://www.ppmy.cn/news/514828.html

相关文章

Oracle中动态SQL详解

一&#xff1a;静态SQL与动态SQL   Oracle编译PL/SQL程序块分为两种&#xff1a;一种为前期联编&#xff08;early binding&#xff09;&#xff0c;即SQL语句在程序编译期间就已经确定&#xff0c;大多数的编译情况属于这种类型&#xff1b;另外一种是后期联编&#xff08;l…

H3C配置静态路由、下一跳地址,使PC相通

一、网络拓扑 实验目的&#xff1a;配置静态地址&#xff0c;下一跳&#xff0c;使PC相通 概念解释&#xff1a; 1、路由器的作用 路由器的核心作用是实现网络互连&#xff0c;数据转发&#xff0c;路由器工作时需要建立和更新路由表&#xff0c;因为路由器互联的是不同网段&…

OSPF多区域概述以及配置命令

OSPF多区域的的原理和配置 目录 一、生成OSPF多区域的原因二、OSPF三种通信量1、域内通信量2、域间通信量3、外部通信量三、路由器类型1、OSPF的区域类型-1二、OSPF的区域类型-2四、OSPF链路状态通告五、路由器对路由条目的选择六、末梢区域和完全末梢区域(一)、作用(二)、…

vue跳转相同路由强制刷新该相同路由组件

平时开发的时候可能遇到这种需求&#xff0c;在打开该菜单页面的情况下&#xff0c;再次点击菜单需要刷新该组件&#xff08;销毁再创建&#xff09;。 而vue自身如果路由不变的情况下是不会这样做的&#xff0c;就是说跳转的路由和当前的路由相同&#xff0c;vue不会进行任何操…

手把手带你做一个react-router-dom v6路由守卫

我们先创建一个react项目 然后 引入路由 npm install react-router-dom --save然后在src下创建一个文件夹 叫 components 在components下创建两个组件 index.jsx 参考代码如下 import React from "react"; import {useNavigate, } from "react-router-dom&quo…

0019-【测序平台】-illunima中国总部-03-上海路游

上海老街 陶瓷艺术馆 艺术街 世博会 交大 复旦 夜上海 金融中心

Vue 路由的使用 ( 动态传参 动态路由 路游接参 导航守卫)

路由的使用 命名路由 给路由起个名字&#xff0c;这样可以方便我们在使用路由的时候&#xff0c; 简写路径 命名视图 给出了一级视图以外的其他视图起名字&#xff0c; 这样可以区分不同级别的路由使用不同级别的视图 动态路由 & 路由传参 & 路由接参 vue cli3 配置反…

悬赏一个关于离散线性时变系统的稳定性证明问题

对于离散的线性时变系统 Δ k 1 ( I − α k G k ) Δ k \Delta_{k1}(I-\alpha_kG_k)\Delta_{k} Δk1​(I−αk​Gk​)Δk​&#xff0c;其中 α k ∈ R \alpha_k \in R αk​∈R&#xff0c; G k G_k Gk​未知但 ∣ ∣ G k ∣ ∣ ≤ c ||G_k|| \leq c ∣∣Gk​∣∣≤c&#…