如何通过反应路由器传递额外的参数

Question

我定义了以下路由，其中​​在slug中，一个新组件被渲染，而孔api请求由flux管理。因为API端点需要一个id，但同时我想在我的url中保留slug我想以某种方式从我的Workshops组件中传递ID：

export default class Root extends Component {
    static propTypes = {
        history: PropTypes.object.isRequired
    }

    render() {
        const { history } = this.props;
        return (
            <Router history={history}>
                <Route component={App}>
                    <Route component={Layout}>
                        <Route path='/' component={Workshops} />
                        <Route path='/:slug' component={BookVoucher} />
                    </Route>
                </Route>
            </Router>
        );
    }

}

我尝试从Workshops组件向BookVoucher传递额外的ID，但我不知道我该怎么做

<Link to={ workshop.slug } id ={ workshop.ID }  > {workshop.title.rendered }</Link><

Answer 1

要传递更多信息，您需要使用查询参数。请参阅文档中的this example。

相关位：

render() {
  let { slug } = this.props.params
  let { query } = this.props.location
  let age = query && query.extraId ? '_default' : ''
  // ...
}