CODEWITHSUNDEEP
javascriptreactjsreact-router
alexmngn
alexmngn

Reputation: 9637

React-Router keeps giving me a warning: You cannot change <Router routes>

I am using React-Router on my application with a personalized history object.

It looks like this:

import { createHistory } from 'history';
import { Router, Route, IndexRedirect, useRouterHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';

...

componentWillMount() {
    const browserHistory = useRouterHistory(createHistory)({
        basename: '/sign',
    });

    this.history = syncHistoryWithStore(browserHistory, store, {
        selectLocationState: (state) => state.routing,
    });
}

render() {
    const history = this.history;

    return (
        <Router history={history}>
            <Route path="/" component={Sign}>
                <IndexRedirect to="/login" />
                <Route path="login" component={Login} />
            </Route>
        </Router>
    );
}

So when I access mywebsite.com/sign, it redirects me to mywebsite.com/sign/login which is fine, but I get this error in the console:

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

If I access the login page directly, I don't get any error.

Any idea what's wrong?

Thanks

Upvotes: 4

Views: 8238

Answers (1)

QoP
QoP

Reputation: 28397

That's probably happening because your "router component" is trying to re-render everytime something changes (probably the history).

It's easier to use a const for your routes

const browserHistory = useRouterHistory(createHistory)({
    basename: '/sign',
});

const history = syncHistoryWithStore(browserHistory, store, {
    selectLocationState: (state) => state.routing,
});

const routes = (<Route path="/" component={Sign}>
                <IndexRedirect to="/login" />
                <Route path="login" component={Login} />
            </Route>)

ReactDOM.render(
  <Router history={history}>
    {routes}
  </Router>,
  yourElement
);

Upvotes: 4

Related Questions