“React“路由传参的两种方式

很多场景下，我们还需要在页面跳转的同时传递参数，在react-router-dom中，同样提供了两种方式进行传参。

• url传参

{/* Home.js */}
<button onClick={()=>{this.props.history.push('/detail/88')}}>去详情页</button>

{/* router.js   react-router-dom就是通过“/:”去匹配url传递的参数 */}
<Route exact path="/detail/:id" component={Detail}></Route>

{/* Detail.js中获取参数 */}
componentDidMount(){
  console.log(this.props.match.params);
}

• 隐式传参

{/* Home.js */}
<button onClick={()=>{this.props.history.push({
    pathname: '/detail',
    state: {
      id: 777
    }
  })}}>去详情页</button>

{/* router.js */}
<Route exact path="/detail" component={Detail}></Route>

{/* Detail.js中获取参数 */}
componentDidMount(){
  console.log(this.props.history.location.state);
}