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

是基于我写的上一篇文章《用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的博客-优快云博客

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

点击【姓名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.youkuaiyun.com/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>

效果如图：