Passing props to React Router children routes

Question

I\'m having trouble overcoming an issue with react router. The scenario is that i need to pass children routes a set of props from a state parent component and route.
wh

Answer 1

I ran into a similar issue and discovered that you can access props set on the Route through this.props.route in your route component. Knowing this, I organized my components like this:

index.js

React.render((
  <Router history={new HashHistory()}>
    <Route component={App}>
        <Route
          path="/hello"
          name="hello"
          component={views.HelloView}
          fruits={['orange', 'banana', 'grape']}
        />
    </Route>
  </Router>
), document.getElementById('app'));

App.js

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>{this.props.children}</div>;
  }
}

HelloView.js

class HelloView extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>
      <ul>
        {this.props.route.fruits.map(fruit => 
          <li key={fruit}>{fruit}</li>
        )}
      </ul>
    </div>;
  }
}

This is using react-router v1.0-beta3. Hope this helps!

---

Ok, now that I'm understanding your issue better, here's what you could try.

Since your child props are coming from a single parent, your parent component, not react-router, should be the one managing which child gets rendered so that you can control which props are passed.

You could try changing your route to use a param, then inspect that param in your parent component to render the appropriate child component.

Route

<Route name="filter" path="filter/:name" handler={Parent} />

Parent Component

render: function () {
  if (this.props.params.name === 'price') {
    return <Child1 {...this.getPriceProps()} />
  } else if (this.props.params.name === 'time') {
    return <Child2 {...this.getTimeProps()} />
  } else {
    // something else
  }
}

Answer 2

React.cloneElement can be used to render the child component and so as pass any data which is available inside the child route component which is defined in the route.

For eg, here I am passing the value of user to the react childRoute component.

{React.cloneElement(this.props.childRoute, { user: this.props.user })}

Answer 3

In child component, insted of

return <div>{this.props.children}</div>

You may merge props with parent

var childrenWithProps = React.cloneElement(this.props.children, this.props);
return <div>{childrenWithProps}</div>