22.跳转页面id参数的传递19-07-04

代码见https://gitee.com/XiaoKunErGe/JianShu.git历史版本第23次提交。

第一种

1.首先我们到home目录下的List文件中，将路由跳转的的地方改写
<Link key={index} to='/detail' >改写为
<Link key={index} to={'/detail/' + item.get('id')}>
2.然后到App.js中将改写路由
<Route path='/detail' exact component={Detail}></Route>改写为
<Route path='/detail/:id' exact component={Detail}></Route>
/detail/:id'指的是访问一个路径后额外添加一个参数，参数命是id
3.到detail路径下的index中接收id，console.log(this.props.match.params.id);打印出来测试id存在
然后到componentDidMount中传递id

componentDidMount() {
    this.props.getDetail(this.props.match.params.id);
  }

const mapDispatchToProps = (dispatch) => ({
  getDetail(id) {
    dispatch(actionCreators.getDetail(id))
  }
});

4.到actionCreators里面拿到id,请求数据

export const getDetail = (id) => {
  return (dispatch)=> {
    axios.get('/api/detail.json?id=' + id).then((res)=>{
      const result = res.data.data;
      dispatch(changeDetail(result.title, result.content))
      console.log(res.data.data);
    })
  }
};

第二种

1.首先我们到home目录下的List文件中，将路由跳转的的地方改写
<Link key={index} to='/detail' >改写为
<Link key={index} to={'/detail?=' + item.get('id')}>
2.然后到App.js中将改写路由
<Route path='/detail' exact component={Detail}></Route>改写回
<Route path='/detail' exact component={Detail}></Route>
/detail/:id'指的是访问一个路径后额外添加一个参数，参数命是id
3.到detail路径下的index中接收id，console.log(this.props.location.search);打印出来测试id存在
然后到componentDidMount中传递id,对id进行处理传递，获取数据。