24

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.
what i would like to do is pass childRouteA its propsA, and pass childRouteB its propsB. However, the only way i can figure out how to do this is to pass RouteHandler both propsA and propsB which means every child route gets every child prop regardless of whether its relevant. this isnt a blocking issue at the moment, but i can see a time when i'd be using the two of the same component which means that keys on propA will overwritten by the keys by the keys of propB. 

# routes
routes = (
  <Route name='filter' handler={ Parent } >
    <Route name='price' handler={ Child1 } />
    <Route name='time' handler={ Child2 } />
  </Route>
)

# Parent component
render: ->
  <div>
    <RouteHandler {...@allProps()} />
  </div>

timeProps: ->
  foo: 'bar'

priceProps: ->
  baz: 'qux'

# assign = require 'object-assign'
allProps: ->
  assign {}, timeProps(), priceProps()

This actually works the way i expect it to. When i link to /filters/time i get the Child2 component rendered. when i go to /filters/price i get the Child1 component rendered. the issue is that by doing this process, Child1 and Child2 are both passed allProps() even though they only need price and time props, respectively. This can become an issue if those two components have an identical prop name and in general is just not a good practice to bloat components with unneeded props (as there are more than 2 children in my actual case).
so in summary, is there a way to pass the RouteHandler timeProps when i go to the time route (filters/time) and only pass priceProps to RouteHandler when i go to the price route (filters/price) and avoid passing all props to all children routes?

PhilVarg
  • 4,762
  • 2
  • 19
  • 37

3 Answers3

28

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
  }
}
GordyD
  • 5,063
  • 25
  • 29
Jim Skerritt
  • 4,348
  • 2
  • 28
  • 25
  • 1
    you have some hard coded fruits in index.js, where as my props are coming from its parent's state. so i cant pass anything to the route from index.js – PhilVarg Aug 06 '15 at 20:15
  • I've updated my answer now that I'm understanding your problem better. hope it helps – Jim Skerritt Aug 06 '15 at 21:16
  • 2
    i really hate how this is how react router needs to be used, but this is answer pretty much got me on the right path. i used `this.context.router.getCurrentParams` (cus im not using beta 1.0) and then made an object map to pass the props i needed to the route handler. from there i used a switch statement to to get the correct child. – PhilVarg Aug 12 '15 at 14:41
  • What about the props needed in child component is a portion of the state of the parent component not just some new data like `fruits` array above? Since in `` the state of the parent `App` is not in scope one cannot pass it to component in a sub ``, or all reference to a child component in the parent component is `{this.props.children}` and not ` one again cannot pass it through the syntax of expression `{this.props.children}`. What is the catch;? – sçuçu Jan 04 '17 at 13:23
12

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>
Alex Shwarc
  • 822
  • 10
  • 20
1

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 })}
Paritosh Pundir
  • 41
  • 1