Warning: [react-router] You cannot change <Router routes>; it will be ignored

[giedrius-timinskis]

Hello again :)

I'm getting a Warning: [react-router] You cannot change <Router routes>; it will be ignored warning whenever I make a change in JS or CSS. Are you aware of this issue?

We'll try to fix it in the meanwhile, but let me know if there's a quick/easy fix for this.

Cheers!

[delambo]

I think the warning is harmless and it comes from Hot Reloading. There's a lot more on it here, including some workarounds. I've tried to wrestle with it before and abandoned the effort.

I would love some help on this.

[arvigeus]

I this solved my issue: https://github.com/denvned/isomorphic-relay-boilerplate/blob/5dd32f3c5759b9305dc1c731bbf80671824978fc/frontend/src/app.js
(setTimeout and unmountComponentAtNode)
Can somebody confirm this?

[peter-mouland]

I've got the same problem on my own starter kit when adding RHL v3, https://github.com/peter-mouland/react-lego#react-hot-loader-v3. I tried the above fix using unmount. That does remove the error, but it also causes the state to be lost when hot-reloading, so I wouldn't recommend it as a sollution

[giedrius-timinskis]

We're just filtering the error message out in the project I'm working on, the error doesn't seem impact the functionality of the app at all.

In the entry file of the app:

if (module.hot) {
    /**
    * Warning from React Router, caused by react-hot-loader.
    * The warning can be safely ignored, so filter it from the console.
    * Otherwise you'll see it every time something changes.
    * See https://github.com/gaearon/react-hot-loader/issues/298
    */
    const orgError = console.error;
    console.error = (...args) => {
        if (args && args[0] && typeof args[0] === 'string' &&
            args[0].indexOf('You cannot change <Router routes>;') > -1) {
            // React route changed
        } else {
            // Log the error as normal
            orgError.apply(console, args);
        }
    };
}