Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[react-router] warning solution and passing root props to sub routes. #148

Closed
amerllica opened this issue Jan 30, 2018 · 2 comments
Closed

Comments

@amerllica
Copy link

Sometime I was sawing the well known warning, 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.

remix-run/react-router#2704

reactjs/react-router-redux#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 Routes and use them. how I could won't see warning and pass props to any Routes?

One of my solution is that, I write all Routes 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?

@frenzzy
Copy link
Member

frenzzy commented Jan 30, 2018

This issue does not relate to Universal Router, see React Router.
Looks like you already asked this question on Stack Overflow, just wait for the answer there.

@frenzzy frenzzy closed this as completed Jan 30, 2018
@amerllica
Copy link
Author

@frenzzy , Thanks dear friend for your answer, dudes in React Router answer me like a BOSS: here and Stack Overflow answer was not related to my question. A Dear friend just wanna help me and write a method that it didn't work. so I write my answer here to someone help me.

By The Way, thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants