Reat-router路由传参

最新推荐文章于 2023-09-14 21:31:13 发布
最新推荐文章于 2023-09-14 21:31:13 发布
阅读量334 收藏 4
点赞数
分类专栏： React react-router 文章标签： react-router react-router路由传参 react-router路由3中方式传参
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/focusdroid/article/details/89403691
版权

react-router路由传参的3中形式

1 使用react-router中的Link标签进行跳转

1.0 使用url传递参数（刷新之后路由参数不会丢失）
在这里插入图片描述
1.1 在这里你要调到那个页面，讲形参写在该路由的path后面，具体格式，见下图
在这里插入图片描述
1.2 获取传递过来的参数
在这里插入图片描述

2. 使用state传递参数【不会在url中显示具体参数】

这种形式有两种书写格式
0. 也是使用Link进行跳转，但不在Route的path中书写书写形参

  1. 使用js的格式跳转

2.0 使用state，&使用Link进行路由传参

不需要写任何形参
在这里插入图片描述
使用state，Link进行跳转

2.1 使用state，&使用JS进行路由传参

在这里插入图片描述
使用state，js方式跳转并传参数

3. 使用query传递参数【不会在url中显示，刷新子页面之后参数%丢失%】

3.1使用query，&使用Link标签跳转携带参数（刷新页面之后参数丢失）

在这里插入图片描述
在这里插入图片描述

3.2使用query，&使用JS方式跳转携带参数（刷新页面之后参数丢失）

query 获取参数的方式和上图一致
在这里插入图片描述

总结:

  1. 第一种路由传参，参数在url上边可以直接看到，当时没有在history记录中
  2. state通常用作普通参数传递（推荐）【在history中】
  3. query可用作支付或其他安全跳转（推荐）【在history中】
focusdroid
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-router 路由传参
逆风飞翔的代码狗
07-13 924
路由传递参数 我们知道前端想后台传递参数有两种方式： 一种是直接将参数放在地址栏里面传递，这里又有两种方式： /home?name=fly&age=18和/home/fly/18 另外一种方式是将参数放在body里面传递 这里针对第一种的两个传递方式： App.js export default class App extends Component { render() { return ( <Router> <Link t
react-router 路由传参
weixin_42331327的博客
01-10 216
react 路由传参的方式 基础代码示例： // 1.安装react-router-dom // npm install react-router-dom --save // 子组件 Hot import React,{Component} from "react" export default class Hot extends Component{ render(){ ...
react router路由跳转传参，react-router-dom基本使用+4种传参方式
程序员良仔
04-18 6948
前言 目录前言一、使用场景二、使用方法三、总结 一、使用场景 二、使用方法 三、总结 你可能感兴趣的文章： vue中组件间通讯的8种方法
react-router路由传参
u011649691的博客
01-03 367
https://blog.csdn.net/qq_23158083/article/details/68488831 注意由于react-router4以后的版本有大的变更，所以传参的方法也有不同。
react路由01——react-routerV6 中路由传递参数的几种方式
@素素~的博客
09-14 1287
react路由01——react-routerV6 中路由传递参数的几种方式
React路由传参的几种方式
m0_68009075的博客
02-23 4531
React路由传参的三种方式
react-router-Demo:react路由嵌套 传参
05-17
该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。目录自动格式化代码更改页面<title>... 使用AJAX请求获取数据与API后端集成节点Ruby on Rails 在开发中...
react-router-parameter:react router路由传参Demo
05-14
资料夹结构 my-app/ README.md node_modules/ package.json public/ index.html favicon.ico src/ App.css App.js App.test.js index.css index.js logo.svg 运行方式： 1....2.npm开始
react-router V6路由配置等例子 1. 路由传参几种方式等例子 2. 路由表配置
09-17
react-router V6路由配置等例子 1. 路由传参几种方式等例子 2. 路由表配置 3. useRoutes钩子的使用 4. 数据路由 createBrowserRouter API + RouterProvider 组件 的使用
关于react-router的几种配置方式详解
12-09
每一门JS框架都会有自己定制的router框架，react-router就是react开发应用御用的路由框架，目前它的最新的官方版本为4.1.2。本文给大家介绍的是react-router相比于其他router框架更灵活的配置方式，大家可以根据自己...
详解React-Router中Url参数改变页面不刷新的解决办法
08-27
在 React-Router 中，使用 URL 传参功能可以实现动态路由的需求，但是默认情况下，当 URL 参数改变时，页面并不会刷新。这是因为 props 的改变并不会引起组件的重新渲染，而 URL 参数属于 props。那么，如何让组件在...
React路由跳转传参问题
weixin_44612172的博客
08-03 561
一 使用Link传参 1.引入Link import { Link } from “react-router-dom” 2.Llink上携带传递的参数,携带的参数以对象形式 <Link to={ { pathname: "/XXX", //xxx为跳转到的路径 state: { title: this.state.exam.title, actionCode: this.state.exam.actionCode } } } >切换考试科目 <i clas
react-router学习笔记
crli的博客
10-11 3113
参考： React Router 中文文档 阮一峰 React Router 使用教程1.Router,hashHistory,Route首先下载react-router$ npm install react-router --save需要注意的是，react-router更新很快，API也在持续升级，也许你看到市面很多教程，但可能那还是1.x甚至是0.x版本的。我们首先在App.jsx写一个简
React路由传参的三种方式
kk2442687723的博客
07-14 1104
React路由传参的三种方式 方式 一： 通过params 1.路由表中 <Route path=' /sort/:id ' component={Sort}></Route>　　　　　　　 2.Link处 HTML方式 <Link to={ ' /sort/ ' + ' 2 ' } activeClassName='active'>XXXX</Li
React-router（8）Link 标签 to 属性为对象时（路由信息传值）
qq20004604的博客
03-04 7421
8、Link 标签 to 属性为对象时（路由信息传值） DEMO地址 参考 6.routeInfo.js 在组件里，每个组件的路由数据，都是各自独立的。 在之前分析中，已知： match 属性的值，存储的是该 Route 标签的路由； location 属性的值，其中 url 和 path 不同 Route 组件中，值是相同的； 但【2】并不准确，准确的说，自带的 has...
React Router页面传值的三种方法及Link的小坑
蜗牛不会跑
06-27 8359
一.props.params官方例子使用React router定义路由时，我们可以给&lt;Route&gt;指定一个path，然后指定通配符可以携带参数到指定的path： 首先定义路由到UserPage页面:import { Router,Route,hashHistory} from 'react-router';1class App extends React.Component { ...
react router路由传参三种方式
jiao512的专栏
10-23 5905
react router路由传参三种方式：通过通配符传参、query传参和state传参。 1.通配符传参 Route定义方式： <Route path='/path/:name' component={Path}/> Link组件： <Link to="/path/通过通配符传参">通配符</Link> 参数获取： this.props.match.par...
react路由基础（Router、Link和Route）
mapbar_front的博客
05-30 3万+
Facebook对react进行持续的改进，路由作为其中最重要的一部分，在4.0版本对其进行了大量的优化，总的来说，简单易用！ 之前使用react路由的时候，我们引入的是react-router包。 现在改版之后，我们引入的包是react-router-dom包。改版之后的react-router-dom路由，我们要理解三个概念，Router、Route和Link。1、Router Route
React Router中Link和NavLink的学习总结
热门推荐
冰雪为融的博客
05-18 4万+
Link现在，我们应用需要在各个页面间切换，如果使用锚点元素实现，在每次点击时，页面被重新加载，React Router提供了&lt;Link&gt;组件用来避免这种状况发生。当 你点击&lt;Link&gt;时，url会更新，组件会被重新渲染，但是页面不会重新加载嗯、先看个例子import {Link} from 'react-router-dom'; const Header = ()=&gt...
react-router-dom v6路由传参
最新发布
01-20
在React Router v6中，路由传参可以通过以下几种方式实现： 1. 使用URL参数传递数据： 在路由路径中使用冒号(:)定义参数，然后在组件中通过`useParams`钩子函数获取参数的值。例如： ```jsx import { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值