React-router 路由传值两种方式

和vue的路由传递在获取值的时候稍微有点不同

安装路由

npm install react-router-dom --save

页面引入路由

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

1.get传值

路由正常配置

<Route path="/newsdetail" component={NewsDetail}/>

传递值

<Link to={`/newsdetail?newid=${item.id}`}>{item.title}</Link>

接收值

var search = this.props.location.search;

但是search里面是包含了所有的参数类似于?newid=0这种格式的，所以我还需要解析里面的参数才能获取到最终的newid
安装url

npm install url --save

在页面引入url模块并解析参数

import url from 'url';
var search = this.props.location.search;
var newid = url.parse(search, true).query.newid;

至此newid获取成功

2.动态路由传值

路由配置:newid

<Route path="/newsdetail/:newid" component={NewsDetail}/>

页面传递值

<Link to={`/newsdetail/${item.id}`}>{item.title}</Link>

页面获取值

var newid = this.props.match.params.newid;

END-------------------------------