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';

...

ponentWillMount() {
    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="/" ponent={Sign}>
                <IndexRedirect to="/login" />
                <Route path="login" ponent={Login} />
            </Route>
        </Router>
    );
}

So when I access mywebsite/sign, it redirects me to mywebsite/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

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';

...

ponentWillMount() {
    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="/" ponent={Sign}>
                <IndexRedirect to="/login" />
                <Route path="login" ponent={Login} />
            </Route>
        </Router>
    );
}

So when I access mywebsite./sign, it redirects me to mywebsite./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

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Aug 28, 2018 at 9:41 Gaurav Paliwal 1,5961616 silver badges2828 bronze badges asked May 10, 2016 at 20:29 alexmngnalexmngn 9,6672020 gold badges7575 silver badges136136 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

That's probably happening because your "router ponent" 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="/" ponent={Sign}>
                <IndexRedirect to="/login" />
                <Route path="login" ponent={Login} />
            </Route>)

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