美文网首页
react 路由传参列表传详情

react 路由传参列表传详情

作者: 雨泽丶 | 来源:发表于2019-04-19 17:41 被阅读0次

    list页->detail页

    方法一:路由参数**

    路由导航:

    用“/”
    
    <Link to={'/detail/'+item.get('id')} key={index}>
    
    **路由map:**
    
    加"/:id"
    
    <Route exact path="/detail/:id" component={Detail} />
    

    detail页获取参数:

    准确的获取到id,不需要做处理

    <pre>this.props.match.params.id</pre>
    

    方法二:查询参数**

    路由导航:

    用“?”
    <Link to={'/detail?'+item.get('id')} key={index}>
    用"$"
    <Link to={`/statics/helloWorld/${id}/${appName}`}>
    // 或者
    <Link to={{pathname: `/statics/helloWorld/${id}/${appName}`}}>
    
    **路由map:**
    
    不加"/:id"
    <Route exact path="/detail" component={Detail} />
    

    detail页获取参数:

    不能准确的获取到id,需要做处理

    this.props.location.search
    

    代码中出现的问题

     this.props.history.push({
          pathname: '/me'
        })
    网页报错history/push 是无法识别的函数
    

    解决问题方法

    父组件里
      <Page {...this.props}/>
    调用props给子组件
    

    相关文章

      网友评论

          本文标题:react 路由传参列表传详情

          本文链接:https://www.haomeiwen.com/subject/ddycgqtx.html