如何使用反应路由器传递额外的参数

Question

我定义了以下路由，其中​​在 slug 上呈现一个新组件，并且孔 api 请求由通量管理。因为 API 端点需要一个 id，但同时我想将 slug 保留在我的 url 中，我想以某种方式从我的 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' : ''
  // ...
}