2

I have the following routes defined, where on slug a new component is getting rendered and the hole api request is managed by flux. Because the API endpoint needs an id, but on the same time I want to keep the slug in my url I want to pass the ID somehow from my Workshops component:

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>
        );
    }

}

and I try to pass to BookVoucher an extra ID from Workshops component but I do not have any idea how would I do that

<Link to={ workshop.slug } id ={ workshop.ID }  > {workshop.title.rendered }</Link><
fefe
  • 8,755
  • 27
  • 104
  • 180
  • Possible duplicate of [react-router - pass props to handler component](http://stackoverflow.com/questions/27864720/react-router-pass-props-to-handler-component) – imjared Dec 14 '15 at 16:54

1 Answers1

0

To pass more you need to use query params. See this example from the docs.

The relevant bits:

render() {
  let { slug } = this.props.params
  let { query } = this.props.location
  let age = query && query.extraId ? '_default' : ''
  // ...
}
enjoylife
  • 3,801
  • 1
  • 24
  • 33