reactjs - 在react-router 2.0.0中使用自定义历史记录时出现问题

Question

具体来说，我想使用“basename”选项，这样我就可以在子目录中运行我的应用程序。

我有以下代码来设置历史记录。

var createHistory = require('history').createHistory;
var useRouterHistory = require('react-router').useRouterHistory;
var browserHistory = useRouterHistory(createHistory)({
    basename: "/subfolder"
});

然后我有以下路由配置

<Router history={browserHistory} className="react-container">
    <Route path="/" component={Template}>
        <IndexRoute component={Diary} />
        <Route path="diary(/:zoom)" component={Diary} />
        <Route path="login" component={Login} />
    </Route>
</Router>

我可以使用以下方式在组件本身中毫无问题地进行路由:

this.context.router.push('login');

但是当我尝试在通量存储中推送一条通往历史记录的新路线时，它不起作用。它将把地址栏中的 URL 更改为正确的值，但组件不会更改。 我可以刷新页面并按预期加载。

例如我可以使用:

//require browser history in store
var browserHistory = require('react-router').browserHistory;
....
//after login
browserHistory.push('/');

我希望加载“日记”组件，但它会将 URL 更改为/subfolder，并且该组件仍保留为登录页面。

如果我只是使用，路由一切正常

require('react-router').browserHistory

而不是自定义代码，但我无法像我需要的那样在子目录中运行应用程序。

预先感谢您给我的任何帮助和提示。 克里斯

Answer 1

在 Flux 存储中，您需要确保使用为路由器设置的相同历史对象。