App.js

首先要在最外层使用<BrowserRouter></<BrowserRouter>包裹住所有内容

1，先下载库

npm i react-router-dom@5 

1,使用params的方式传参

父组件

{/* 静态传参 */}
<Link to='/Home/Message/Detail/小米/001'>{item.name}</Link>
{/* 动态传参 */}
<Link to={`/Home/Message/Detail/小米/${item.id}`}>{item.name}</Link>

子组件

console.log(this.props.match.params,'params消息')

2，使用search传递参数

父组件

{/* 使用search静态传参 */}
<Link to='/Home/Message/Detail/?id=001'>{item.name}</Link>
{/* 使用search动态传参 */}
<Link to={`/Home/Message/Detail/?id=${item.id}&name=${item.name}`}>{item.name}</Link>





  {/* 使用search和state传参，不需要拼接路径 */}
 <Route path='/Home/Message/Detail' component={Detail}></Route>

子组件

获取到的search是urlencoded编码（即，?id=003&name=消息3）字符串，需要借助querystring解析（querystring.stringify(obj), querystring.parse(str)）。去掉问号用qs.parse(str.slice(1)

3，state传参

父组件

{/* 使用state传参 */}
{/* 使用state静态传参 */}
<Link to={{pathname:'/Home/Message/Detail',state:{id:'001'}}}>{item.name}</Link>
{/* 使用state动态传参 */}
<Link to={{pathname:'/Home/Message/Detail',state:{id:item.id}}}>{item.name}</Link>

子组件

   const {state} = this.props.location
    console.log(this.props,'使用state传递参数')