Javascript ReactJS MobX和ReactRouter v4存在url历史记录问题

我正在用ReactJS、MobX和ReactRouter v4制作web应用程序，我在路由器历史记录和重定向方面遇到了一些问题。 我试图重定向用户的主页时，他将注销或登录，我试图实现这一点在我的商店。以下是源代码：

index.js

const APP = document.getElementById('app');

render(
    (
        <Provider {...stores} >
            <MuiThemeProvider>
              <Router history={history} >
                  <div>
                    <Routes />
                  </div>
              </Router>
            </MuiThemeProvider>
        </Provider>
    ) , APP);

@inject('userStore', 'commonStore')
@withRouter
@observer
class Routes extends Component {

    render() {

        return (
            <div>

                    </div>
                    <switch>

                        <Route exact path="/create_listing" render={() =>
                            (<CreateListing store={clStore} />)}
                        />

                        <Route path="/create_listing/description" render={() =>(
                            <CLLayout store={clStore} />
                        )}/>

                        <Route path="/create_listing/amenities" render={() =>(
                            <CLLayout store={clStore} />
                        )}/>

                        <Route path="/create_listing/optional" render={() =>(
                            <CLLayout store={clStore} />
                        )}/>

                        <Route path="/create_listing/media" render={() =>(
                            <CLLayout store={clStore} />
                        )}/>

                        <Route path="/create_listing/preview" render={() =>(
                            <CLLayout store={clStore} />
                        )}/>

                        <Route path="/create_listing/done" render={() =>(
                            <CLLayout store={clStore} />
                        )}/>

                        <Route exact path="/" component={ FrontPageIndex }/>
                    </switch>

            </div>
        );
    }
}

export default Routes;

import createBrowserHistory from 'history/createBrowserHistory';
import createMemoryHistory from 'history/createMemoryHistory';

export default process.env.BROWSER? createBrowserHistory() : createMemoryHistory();

@action logout() {
        return agent.Auth.logout()
            .catch(action((err) => {
                this.errors = err.response && err.response.body && err.response.body.errors;
                throw err;
            }))
            .finally(action(() => {
                commonStore.setToken({});
                userStore.forgetUser();
                this.inProgress = false;
                history.replace('/');
            }));
    }

store.js

const APP = document.getElementById('app');

render(
    (
        <Provider {...stores} >
            <MuiThemeProvider>
              <Router history={history} >
                  <div>
                    <Routes />
                  </div>
              </Router>
            </MuiThemeProvider>
        </Provider>
    ) , APP);

@inject('userStore', 'commonStore')
@withRouter
@observer
class Routes extends Component {

    render() {

        return (
            <div>

                    </div>
                    <switch>

                        <Route exact path="/create_listing" render={() =>
                            (<CreateListing store={clStore} />)}
                        />

                        <Route path="/create_listing/description" render={() =>(
                            <CLLayout store={clStore} />
                        )}/>

                        <Route path="/create_listing/amenities" render={() =>(
                            <CLLayout store={clStore} />
                        )}/>

                        <Route path="/create_listing/optional" render={() =>(
                            <CLLayout store={clStore} />
                        )}/>

                        <Route path="/create_listing/media" render={() =>(
                            <CLLayout store={clStore} />
                        )}/>

                        <Route path="/create_listing/preview" render={() =>(
                            <CLLayout store={clStore} />
                        )}/>

                        <Route path="/create_listing/done" render={() =>(
                            <CLLayout store={clStore} />
                        )}/>

                        <Route exact path="/" component={ FrontPageIndex }/>
                    </switch>

            </div>
        );
    }
}

export default Routes;

import createBrowserHistory from 'history/createBrowserHistory';
import createMemoryHistory from 'history/createMemoryHistory';

export default process.env.BROWSER? createBrowserHistory() : createMemoryHistory();

@action logout() {
        return agent.Auth.logout()
            .catch(action((err) => {
                this.errors = err.response && err.response.body && err.response.body.errors;
                throw err;
            }))
            .finally(action(() => {
                commonStore.setToken({});
                userStore.forgetUser();
                this.inProgress = false;
                history.replace('/');
            }));
    }

方法history.replace（'/'）；实际上，替换浏览器中的URL，但不呈现新组件（主组件），为此，我应该手动刷新网页

---

有什么建议吗

您是否尝试使用Router.transitiono

我解决了这个问题

作为路由器，我应该使用react-dom中的默认路由器，而不是使用react-router dom中的BrowserRouter或HashRouter

下面是一个例子：

import { Router } from 'react-router';
import history                  from './History';


const APP = document.getElementById('app');

render(
    (
        <Provider {...stores} >
            <MuiThemeProvider>
              <Router history={history}>
                  <div>
                    <Routes />
                  </div>
              </Router>
            </MuiThemeProvider>
        </Provider>
    ) , APP);

---

问题似乎出在BrowserRouter或HashRouter上，因为它们都保留自己的历史记录。“react Router”中的默认路由器对我有效。

同样的问题。。你有没有想出一个解决办法，这样替换历史记录可以刷新网页？是的，我只是给出一个答案。