How to explicitly pass router params to React Component?

Question

Does anyone have an idea how to pass the react-router params object explicitly to a component?

I want to make something like this, because unit testing would be easier if I could pass the ApiClient from outside:

function FooComponent() {
  const apiClient = new ApiClient('http://foo.bar');
  return (
    <Bar apiClient={apiClient} param={?No idea how to pass the token param?} />
  );
}

<Router history={history}>    
  <Route path="/test" component={Test} />
    <IndexRoute component={TestIndex} />
    <Route path="/validate/:token" component={FooComponent} />
</Router>

David Lin · Accepted Answer · 2016-11-07 23:38:31Z

1

If your component is attached to the route ( i.e. set as the component prop of Route as in your provided code ), it receives a prop params from react-router where you can get the route and query parameters. In your case:

function FooComponent(props) {
  const apiClient = new ApiClient('http://foo.bar');
  return (
    <Bar apiClient={apiClient} param={props.params} />
  );
}

For official example, look at : https://github.com/ReactTraining/react-router/blob/master/examples/query-params/app.js

answered Nov 7, 2016 at 23:38

David Lin

13.4k5 gold badges48 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quentin · Accepted Answer · 2016-11-08 04:12:56Z

0

You can also consider something like this to pass down the router props and add some custom props to your component for example. I don't know if it is documented somewhere in react-router documentation

<Route path="/campaign/overview" component={(routeProps) =>
    <MyCoolComponent
        myCustomApiKey="secret"
        {...routeProps}
    />
}/>

You can now access this.props.params and this.props.myCustomApiKey in MyCoolComponent

answered Nov 8, 2016 at 4:12

Quentin

3861 gold badge4 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to explicitly pass router params to React Component?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related