小编Har*_*man的帖子

在React-Router中使用Link传递道具

您好我正在尝试Details使用React Router的链接组件将Props传递给组件.我不想Detail在页面上显示Component,它应该在单击按钮时呈现,但是当新的Component呈现时,url应该看起来像'/ details/KvhNJecsqr6JFMSRTS'.

 class  Card extends Component {
                    render(props){
                    return(
                   <Col xs={12} md={4}>
                    <Thumbnail src="./someiamge">
                      <h3>{this.props.cardHeading}</h3>
                      <p>{this.props.cardDesc}</p>
                        <Button bsStyle="primary">Mieten</Button>&nbsp;
                        <Button bsStyle="default"><Link to='/details' params={{cardId: this.props.cardId}} 'here i wanna pass some props how i do this ?' >Details</Link></Button>
                    </Thumbnail>
                  </Col>

                    )
                  }
                }

export default Card
Run Code Online (Sandbox Code Playgroud)

这是我的路由器的东西

<BrowserRouter>
          <div>
              <Route name='details' path='/details/:cardId' component={Details}/>
            </div>
          </div>
</BrowserRouter>
Run Code Online (Sandbox Code Playgroud)

hier是我的Details组成部分:

    class Details extends Component {
      render() {
        return (
          <div >
            <div style={{textAlign: "left"}}>
              <h3>{this.props.cardHeading}</h3>
              <p>{this.props.cardDesc}</p>
              .......
            </div>
          </div> …
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6 reactjs react-router

1
推荐指数
1
解决办法
6442
查看次数

标签 统计

ecmascript-6 ×1

javascript ×1

react-router ×1

reactjs ×1