react路由系列03___路由传值之params

╰+攻爆jí腚メ 2021-12-11 03:53 312阅读 0赞

###        此篇文章是基于 [react路由系列01\_\_\_ 在react脚手架里使用React-router(简单入门)][react_01_ _react_React-router]和 [react路由系列02\_\_\_ 二级路由][react_02_] 上写的，如果你有路由基础，可以直接看这篇文章，如果没有路由基础，则建议先看前两篇文章。 ###

# #

## [React路由传参的三种方式][React]： ##

## 一、通过params（以GoodsList.js为例） ##

解释：组件之间传递参数时，一般都是键值对的方式，如：username=tianwater。

###     1、传值(需要修改两个地方)： ###

**    1）、路由表中**（写键名）

<Route path='/gla/Pencil/:id' component=\{Pencil\} />

<Route path='/gla/Eraser/:name' component=\{Eraser\} />

**     2）、 Link（NavLink）处** （写键对应的值）**   **

<NavLink to=\{'/gla/Pencil/'+'01008'\} >铅笔</NavLink>

<NavLink to='/gla/Eraser/橡皮02' >橡皮</NavLink>

###     2、获取值： ###

1）、在“Pencil.js”里

商品编号：\{this.props.match.params.id\}<br/>

2）、在“Eraser.js”里

商品名称：\{this.props.match.params.name\}<br/>

**PS：经过以上的更改后，文件“GoodsList.js”，“Pencil.js”，“Eraser.js”的代码分别为（可以复制以下代码）：**

**1）、GoodsList.js文件：**

import React, \{ Component \} from 'react';

import \{ BrowserRouter, Route,NavLink\} from 'react-router-dom';

import Pencil from './Pencil';

import Eraser from './Eraser';

class GoodsList extends Component\{

render()\{

return (

<BrowserRouter>

<div>欢迎来到商品列表页面</div><br/>

<NavLink to=\{'/gla/Pencil/'+'01008'\} >铅笔</NavLink>

|

<NavLink to='/gla/Eraser/橡皮02' >橡皮</NavLink>

<hr/>

<Route path='/gla/Pencil/:id' component=\{Pencil\} />

<Route path='/gla/Eraser/:name' component=\{Eraser\} />

</BrowserRouter>

)

\}

\}

export default GoodsList;

**2）、Pencil.js文件：**

import React,\{Component\} from 'react';

class Pencil extends Component\{

render()\{

return (

<div>

商品编号：\{ this.props.match.params.id\}<br/>

商品名称：铅笔<br/>

商品描述：铅笔好，铅笔好，铅笔写错还可以擦掉<br/>

</div>

)

\}

\}

export default Pencil;

**3）、Eraser.js文件：**

import React, \{ Component \} from 'react';

class Eraser extends Component\{

render()\{

return (

<div>

商品编号：01002<br/>

商品名称：\{ this.props.match.params.name\}<br/>

商品描述：橡皮好，橡皮好，橡皮可以擦掉铅笔写<br/>

</div>

)

\}

\}

export default Eraser;

ok，第一种方式大功告成！

下一篇是第二种方式：[通过query的方式][query]

[react_01_ _react_React-router]: https://blog.csdn.net/jiang7701037/article/details/95222851
[react_02_]: https://blog.csdn.net/jiang7701037/article/details/95400261
[React]: https://www.cnblogs.com/houjl/p/10056718.html
[query]: https://blog.csdn.net/jiang7701037/article/details/95407546

发表评论取消回复

表情：

评论列表（有 0 条评论，312人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-03-路由-路由守卫

首先，路由守卫存在三种情况 1、全局守卫 router.beforeEach 在 mian.js 内部添加全局守卫，to 表示去往哪个路由，from 表示从哪个路由

妖狐艹你老母/ 2023年07月25日 12:52/ 0 赞/ 12 阅读

相关 vue-03-路由-路由传参

和平时的页面跳转一样，我们可能需要在地址栏上传递某些参数，例如，从商品列表页面，跳转的某个商品的详情页面，这个时候，如果是页面跳转的时候，我们会直接在url上跟上一个商品id，

男娘i/ 2023年07月20日 13:40/ 0 赞/ 40 阅读

相关 React路由传值操作

1》通过id形式传值传值： <Link to='/news/张三'>新闻</Link> 路由中： path='/news/:id'

╰半橙微兮°/ 2023年03月06日 03:22/ 0 赞/ 14 阅读

相关 vue路由传值params，query之踩坑系列

vue路由传值params，query之踩坑系列 vue路由传值 > `this.$router.push({name:xx,params:{id:xx}})`,或者另

你的名字/ 2023年01月15日 10:24/ 0 赞/ 149 阅读

相关 React-router（5）params 路由传参

5、参数 [DEMO地址][DEMO] > 参考 4.params.js React路由取参数，有两种： 1. `?a=1` ：这种属于 search 字符串，在

水深无声/ 2022年05月30日 04:09/ 0 赞/ 356 阅读

相关 react路由系列05___路由传值之state

此篇文章是基于 [react路由系列01\_\_\_ 在react脚手架里使用React-router(简单入门)][react_01_ _react_React-route

心已赠人/ 2021年12月11日 04:02/ 0 赞/ 351 阅读

相关 react路由系列04___路由传值之query

此篇文章是基于 [react路由系列01\_\_\_ 在react脚手架里使用React-router(简单入门)][react_01_ _react_React-route

桃扇骨/ 2021年12月11日 03:59/ 0 赞/ 571 阅读

相关 react路由系列03___路由传值之params

此篇文章是基于 [react路由系列01\_\_\_ 在react脚手架里使用React-router(简单入门)][react_01_ _react_Reac

╰+攻爆jí腚メ/ 2021年12月11日 03:53/ 0 赞/ 313 阅读

相关 react路由系列02___ 二级路由

一、经过文章“[react路由系列01\_\_\_ 在react脚手架里使用React-router(简单入门)][react_01_ _react_React-router]

墨蓝/ 2021年12月11日 03:49/ 0 赞/ 431 阅读

相关 vue路由传值

1）通过动态路由方式 //路由配置文件中配置动态路由 { path: '/detail/:id',

╰半橙微兮°/ 2021年10月19日 11:52/ 0 赞/ 361 阅读