通过道具React Router

Question

I need to pass props through React Router to LawsList Component. So I come up with this code:

On main.js :

const lawlistcomponent = props => {
  console.log("test");
  return <LawsList {...props} />;
};

const routes = (
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute render={lawlistcomponent} />
      <Route path="laws/:lawId" component={LawsMain} />
      <Route path="votes/:lawId" component={VotesMain} />
    </Route>
  </Router>
);

And on LawsList component :

 export default createContainer(props => {
  console.log(this.props.voted);
  Meteor.subscribe("laws", props.voted);
  return { laws: Laws.find({}).fetch() };
}, LawsList);

It does not return the component at all. I have no error message that could guide either !

Any hint ?

Answer 1

Your local lawlistcomponent component is not receiving any props in the way it was passed to the route. Anyway, I'd recommend you to use the render inline function to render the component to the route (supposing that you are using the React Router V4). Like this:

<Route
  exact
  path='/'
  render={(props) => <LawsList {...props} anotherProp={value} />}
/>

As described in the React router docs :

This allows for convenient inline rendering and wrapping without the undesired remounting explained above. Instead of having a new React element created for you using the component prop, you can pass in a function to be called when the location matches. The render prop receives all the same route props as the component render prop.

Thanks Jens for your suggestion.