是基于我写的上一篇文章《用react的路由写一个简单的导航》上面扩展出来的，朋友们可以去康康。

通过url传参的方法有：

1）直接？接收：this.props.location.search

2）query 接收：this.props.location.query

3）state 接收：this.props.location.state

4）params 接收：this.props.location.params

用react的路由写一个简单的导航_qq_42505615的博客-CSDN博客

先看看我们需要得到的效果：

点击【姓名007】，咱们可以进去看到007的其他详细信息。

1.咱们先创建一个叫做 RoleDetail.js的文件，代码如下：

import React, { Component } from 'react';class RoleDetail extends Component {render() {return (<div><h2>这是人员具体信息</h2><div>ID为</div></div>);}
}export default RoleDetail;

2.咱们现在去App.js配置它的路径

App.js代码如下：

import './App.css';
import{BrowserRouter as Router,  Link,  Route  }from 'react-router-dom'import Nav from './Component/Nav/Nav'
import Bug from './View/Bug'
import Home from './View/Home'
import Role from './View/Role'
import Share from './View/Share'
import RoleDetail from './View/RoleDetail';function App() {return (<div className="App"><Router><Nav></Nav><Route path="/home" component={Home}></Route><Route path="/role" component={Role}></Route><Route path="/share" component={Share}></Route><Route path="/bug" component={Bug}></Route><Route path="/detail" component={RoleDetail}></Route></Router></div>);
}export default App;

3.再去Role.js把Link加上就好，值得注意的是，react中变量要写在{}里面。

搞定~

可以观察到我们把鼠标放在【姓名：007】上面时就可以在左下角看到咱们传递的参数。点进去后，发现参数加在url上面。

我们来观察一下控制台打印出来的内容：

我们发现在 location的 search 里面找到了传递的参数。

那么，传递多个参数我们该怎么做呢？很简单，代码如下：

<Link to={"/detail?id="+item.stuNo+"&name="+item.stuName}>姓名:{item.stuNo}</Link>

效果如图：

但是这样传参，需要你自己把url中传的参数解出来，太麻烦了！

这里有一个JS获取url参数的方法：https://blog.csdn.net/qq_36947128/article/details/78594462

那么换种思路。

                <Link to={{pathname:"/detail",query:{id:item.stuNo,name:item.stuName}}}>姓名:{item.stuNo}</Link>薪水:{item.salary}

这个时候我们鼠标放在链接上时左下角如图，只有地址：

我们再看一下locatio中是否有传递的参数，答案是有的。

如果我们要把query取出来用该怎么办呢？

回到RoleDetail.js中，咱们把id和name解构出来方便使用。

效果如图：

别离开，还有两种类似的方法~params和state。因为写法相同，这里就写一种。其实这三者都差不多，只是属性不一样，而且state传的参数是加密的。

params（ state）：

修改一下代码：

                <Link to={{pathname:"/detail",params:{id:item.stuNo,name:item.stuName}}}>姓名:{item.stuNo}</Link>薪水:{item.salary}

        let {id,name} = this.props.location.params;

效果也是一样滴~

路由传参：

先注释一下免得报错。

咱们回到App.js中。

Role.js的代码为：

                <Link to={'detail/'+item.stuNo}>姓名:{item.stuNo}</Link>薪水:{item.salary}

效果如图，咱们在location的pathname中找到了传递的参数。

路由传参传两个参数怎么写呢？

一样的。更新一下代码：

App.js

          <Route path="/detail/:id/:name" component={RoleDetail}></Route>

Role.js

                <Link to={'detail/'+item.stuNo+"/"+item.stuName}>姓名:{item.stuNo}</Link>薪水:{item.salary}

效果如图：

解构出来在页面上显示和上面的类似。

let {id,name} = this.props.match.params

但是我们想没传参时候也访问 http://localhost:3000/detail/ 该怎么办呢？

修改一下Route即可。

          <Route path="/detail/:id?/:name?" component={RoleDetail}></Route>

效果如图：

React通过url传参和通过路由传参相关推荐

react更改路由入参_react怎么路由传参？
react路由传参(4种方式) 1.通过params传参(刷新页面后参数不消失,参数会在地址栏显示) 路由页面: //注意要配置 /:id 路由跳转并传递参数:链接方式:XX //或: XXjs方式: ...
Laravel之路由请求方式、路由传参
1.路由请求方式____文件路径app->routes->web.php //get请求方式 Route::get('user/show',function(){return '世间安得两 ...
vue路由传参的三种方式
目录 1.动态路由传参 2.params传参 3.query传参 1.动态路由传参使用"路径参数"使用冒号 : 标记.当匹配到一个路由时,参数值会被设置到 this.$route ...
Vue路由传参几种方式
① 动态路由传参 {path:'detail/:username?',name:'a', component:()=>import('@/components/Detail.vue')}< ...
react更改路由入参_JavaScript基础教程 react router路由传参
本篇教程介绍了JavaScript基础教程 react router路由传参,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < 今天,我们要讨论的是react ...
react路由传参的几种方式
第一种传参方式,动态路由传参 <Link to='/home/dx'>首页</Link><Route path="/home/:name" compo ...
react路由：路由传参params、search、state
react路由:路由传参params.search.state(含二级路由和三级路由) 一.准备工作: 1.创建myProject05-router目录 2.创建清单文件, npm init ...
react路由传参问题
之前在工作中开发一个react项目的时候遇到路由传参的问题,当时因为基础不好,解决这个问题用了好久,还产生了一个bug,特此记录一下. 项目中路由跳转使用的是hashRouter,由于是详情页面跳到审 ...
react路由嵌套路由及路由传参
因为react的嵌套路由跟vue比就像屎一样不好写所以在使用的时候建议使用react-router-config来配置路由会相对轻松第一步先安装路由依赖 yarn add react-rou ...

React通过url传参和通过路由传参

params（ state）：

路由传参：

React通过url传参和通过路由传参相关推荐

最新文章

热门文章