`react-router` warning solution and passing root props to sub routes

Question

Sometime I was sawing the well known warning, browser.js:49 Warning: [react-router] You cannot change <Router routes>; it will be ignored browser.js:49 Warning: [react-router] You cannot change <Router routes>; it will be ignored and I found two trend issues that friends discussed about this issue and the solution is const routes components and putting them inside Router component.

https://github.com/ReactTraining/react-router/issues/2704

https://github.com/reactjs/react-router-redux/issues/179

Just like below:

you will see warning with this code:

class Root extends Component {
  render() {
    return (
      <Router history={browserHistory} createElement={this.createElement}>
        <Route component={App}>
          <Route path="/" component={MainPage}/>
          <Route path="/page2" component={Page2}/>
          <Route path="/settings" component={SettingsPage}/>
        </Route>
      </Router>
    )
  }
}

but you won't see warning with this code:

const routes = (
  <Route component={App}>
    <Route path="/" component={MainPage}/>
    <Route path="/page2" component={Page2}/>
    <Route path="/settings" component={SettingsPage}/>
  </Route>
);

class Root extends Component {
  render() {
    return (
      <Router history={browserHistory} createElement={this.createElement}>
        {routes}
      </Router>
    )
  }
}

This is OK, awesome solution to vanish [react-router] warning, and for Root Component changing state the routes was static and you won't see any warnings. BUT my issue is: I pass Root Component props to each Route and I can not do the above solution 😞 , I must put App Route inside Router so with this method absolutely this is not solution method and I will saw the known warning again, see my router code:

export default class AppRoutes extends Component {
    render() {
        return (
            <Router history={hashHistory}>
                <Route path="/" {...this.props} component={App}>
                    <IndexRoute component={Home}  {...this.props}/>
                    <Route path="/transaction" component={Transaction} {...this.props}/>
                    <Route path="/users-management" component={UsersManagement} {...this.props}/>
                    <Route path="/issues" component={Issues} {...this.props}/>
                    <Route path='/not-found' component={NotFound}/>
                    <Route path='/settlement-management' component={SettlementManagement} {...this.props}/>
                    <Route path='/categories-management' component={CategoriesManagement} {...this.props}/>
                    <Route path='/gifts-management' component={GiftsManagement} {...this.props}/>
                    <Redirect from='/*' to='/not-found'/>
                </Route>
            </Router>
        );
    }
}

And the Root Component render code is:

render(){
    return(
        <AppRoutes {...this}/>
    );
}

I passed this as a props to AppRoutes component and I need to pass inherited this.props to sub Route s and use them. how I could won't see warning and pass props to any Route s?

One of my solution is that, I write all Route s as static and call Root Component props directly inside each component, but how? I don't know how I can call and keep props of Root Component inside the component that need to have props of Root Component as the component is not direct Root Component children?

Answer 1

You can use render route prop instead of component to pass props to your components :

<Route path="/transaction" render={() => <Transaction {...this.props} />} />

Edit : Or this to also pass route props :

<Route path="/transaction" render={(routeProps) => <Transaction parentProps={this.props} {...routeProps}  />} />

(I think it's better to pass individual custom parent props to not enter in conflict with routeProps)