react路由使用(三)

上篇文章我们介绍了路由的跳转，一种是通过标签形式跳转，一种是函数式跳转，
本文我们继续讲解react中路由传递参数。

1.params传参：

import React from "react";
import { Switch, Route, Link, Redirect } from "react-router-dom";
import "./App.css";
import DemoOne from "./components/DemoOne";
import DemoTwo from "./components/DemoTwo";

const App = () => {
  return (
      <div className="App">
          <Link to="/demoone">demoone</Link>
          <Link to="/demotwo/matthew">demoteo</Link>  // 标签传参 相当于实参
          <Switch>
             <Route path="/demoone" component={DemoOne} />
             // /demotwo后加/:属性名 接收参数相当于形参  ？代表传了则有 不传则无视
             // 不加问号 如果 不传对应参数 则被认为是新的路径 造成错误
             <Route path="/demotwo/:name?" component={DemoTwo} />
             <Redirect from="/" to="/demoone" exact />
          </Switch>
      </div>
  );
};
export default App;

接下来在demotwo页面读取路由参数，就可以看到：
那么通过this.props.match.params.name拿到matthew这个值。

2.Link NavLink标签属性state传值：

// 利用`Link`和`NavLink`标签的属性，只需要在标签中：
// 这跟之前直接写路由地址 有一定区别
<Link to={{ pathname: "/demotwo", state: { name: "matthew" } }}>

如图，我们就可以通过this.props.location.state来读到我们所传的值。不仅如此在重定向Redirect标签中也可以如此 ：
<Redirect from="/" to={{ pathname: "/demotwo", state: { name: "matthew" } }} exact />读取方法依旧是：this.props.location.state

3.query传参：

// 用一个按钮来跳转
clickHandle = () =>{
   this.props.history.push({
       pathname:'/demetwo',
       query:{
          name:'matthew'
       }
   })
}
<button onClick={this.clickHandle}>点击跳转</button>

如上图，我们可以通过this.props.location.query拿到所传递的参数。这种比较适合函数式跳转的时候传参使用。

4.URL传参：

// Link  NavLink 皆可问号后面属性等于属性值的的形式 多个参数用&连接即可
<Link to="/demotwo?name=matthew&age=20">demoteo</Link>

如图箭头所指我们通过this.props.location.search就可以读到，但是问题来了要怎么读取出来呢,这里介绍一个很实用的方法。

// 导入querystring 这个包 react 自带 不用 另行安装
import qs from 'querystring'
// 使用 parse()方法对 URL 进行解析  
// 注意：slice(1)方法是为了将 URL 中最前面的问号截取掉
console.log(qs.parse(this.props.location.search.slice(1)))

打印结果如下图：

是不是也成功地拿到了我们所传的值了。

那么在react中的路由传递参数就说到这里。~~