Getting `You cannot change <Router routes>; it will be ignored` when hot-loading

[Sawtaytoes]

When hot-loading I am getting the warning:

You cannot change <Router routes>; it will be ignored

My process is I save a file in view with some update like I added a <span>, and it shows up on the page, but then this error shows. I checked into it, finding the commit here: remix-run/react-router@62f6ef2

I don't know what this does. It looks like it's saying if you're on the current page and the route doesn't change, but everything else stayed the same, then warn.

[ppalladino]

+1 Same issue.

[jlongster]

This sounds like a react-router issue. Please file there; re-open this if I'm wrong.

[tomasz-szymanek]

+1 same here. reproduced by doing this:

const renderAll = () => {
  ReactDOM.render(
    (
      <Provider store={store}>
        <Router history={browserHistory}>
          <Route path="/" component={App}>
            <Route path="about" component={About} />
            <Route path="posts" component={Posts}>
              <Route path="/post/:nr" component={Post} />
            </Route>
            <Route path="*" component={NoMatch} />
          </Route>
        </Router>
      </Provider>
    ), document.getElementById('root')
  );
};

store.subscribe(renderAll);
renderAll();

[amertak]

Started to get the same error.

[haim-rubin]

Hi,
Is someone of you found solution for this error?
Thanks!

[amertak]

I found solution for my problem.
I am using shared component for all other components as a parent (it has services and other things in constructor). The problem was, that also containers used this shared component and change of every component in app went directly to router through container.
My "solution" was not to use this shared component for Containers (components defined in router routes). Hope this helps

[lauterry]

hi @amertak

I have the same issue.

I can't see what you're talking about.

Can you explain with some code snippet please ?

Best regards

[amertak]

Hi @lauterry I'll try.

<Provider store={store}> <Router history={history}> <Route path="/sessions" component={Sessions} /> <Route path="/recordings" component={Recordings} /> <IndexRoute component={VisitorList}/> </Router> </Provider>

My problem was, that all the containers (Sesions, Recordings, VisitorList) had been using as a parent not Component from React, but my component called DashboardComponent

export default class DashboardComponent extends Component { ...

Also all other components in app were using DashboardComponent so if I changed something it went up to the container -> changed the router -> threw error

I have to point out that this might not be the same issue as you have.

[OriolBonjoch]

Hi all,

Same happened here and the solution was declaring the routes object outside of the render method as PlainRoutes, so it doesn't get updated. So taking @tomasz-szymanek code it would be something like:

const routes = {
    path: '/',
    component: App,
    childRoutes: [
        { path: '/about', component: About },
        {
            path: '/posts',
            component: Posts,
            childRoutes: [ { path: '/post/:nr', component: Post } ]
        },
        { path: '*', component: NoMatch}
    ]
};

const renderAll = () => {
  ReactDOM.render(
    (
      <Provider store={store}>
        <Router history={browserHistory} routes={routes} />
      </Provider>
    ), document.getElementById('root')
  );
};

store.subscribe(renderAll);
renderAll();

That way the routes list is not changed every time renderAll is executed and react-router doesn't complain.

[boneyao]

thanks @OriolBonjoch it works for me!

[tomasz-szymanek]

You are god to me @OriolBonjoch

[nakamorichi]

The PlainRoutes approach suggested by @OriolBonjoch didn't work for me. Is there an actual working example of react-router-redux with hot reloading?

[OriolBonjoch]

First of all that is a warning that doesn't stop anything, its just annoying.

I think this happens because of react-redux top level Provider component. It triggers the componentWillReceiveProps in Route component even when they haven't really changed (component and path remains the same but is a new object since you created it inside render function).

Besides that I'm curious, @Kitanotori in what case you modified the routes in runtime?

[nakamorichi]

@OriolBonjoch It stops the hot reloading. The changes I make to the route components are not being hot reloaded.

I will post an example app to Github soon in order to explain the issue better.