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

Hi, I cannot seem to setup the hot reloading. It actually works, but I keep getting the error in console You cannot change <Router routes>; it will be ignored

This is my router file

import React from 'react';
import ReactDOM from 'react-dom';

import {Provider} from 'react-redux';
import {Router, browserHistory} from 'react-router';
import {syncHistoryWithStore} from 'react-router-redux';
import { getRootNode } from '../../helpers/routing_helpers';

// Components

// Hot reload
import { AppContainer as HotLoaderAppContainer } from 'react-hot-loader';
import AppRoutes from './routes';

export default function (inject: Function, {Store}: IContext) {
  const history = syncHistoryWithStore(browserHistory, Store);

  const renderApp = (CurrentAppRoutes: any) => {
    ReactDOM.render(
      <HotLoaderAppContainer>
        <Provider store={Store}>
          <Router history={history}>
            { CurrentAppRoutes }
          </Router>
        </Provider>
      </HotLoaderAppContainer>,
      getRootNode('react-root')
    );
  };

  renderApp(AppRoutes);

  if (module.hot) {
    module.hot.accept('./routes.jsx', () => {
      const NextAppRoutes = require('./routes').default;
      renderApp(NextAppRoutes);
    });
  }
};

And a routes file

import React from 'react';

import {Route, IndexRoute } from 'react-router';

// Components
import Layout from './components/layout';
import HomePage from './components/home_view';
import ProfilePage from '../user/components/profile_view';

const AppRoutes = (
  <Route path="/" component={Layout}>
    <IndexRoute component={HomePage} />
    <Route path="profile" component={ProfilePage} />
  </Route>
);

export default AppRoutes;

Would you be able to help please?

[thebuilder]

My “solution” is to override the console.error, and filter the warning out. It’s only included when HMR is enabled.

/**
 * 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
 */
if (module.hot) {
  const isString = require('./utils/checks').isString;

  const orgError = console.error; // eslint-disable-line no-console
  console.error = (...args) => { // eslint-disable-line no-console
    if (args && args.length === 1 && isString(args[0]) && args[0].indexOf('You cannot change <Router routes>;') > -1) {
      // React route changed
    } else {
      // Log the error as normally
      orgError.apply(console, args);
    }
  };
}

[singggum3b]

I think this issue should this be kept open util it’s officially fixed?