在 react-router 2.0.0 中使用自定义历史记录的问题答案

【问题标题】：Problems using a custom history in react-router 2.0.0在 react-router 2.0.0 中使用自定义历史记录的问题
【发布时间】：2016-03-17 11:13:36
【问题描述】：

具体来说，我想使用“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

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

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

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

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

【讨论】：

你能添加一个链接到一些关于这个的文档吗？我一直在搜索 react-router 文档并尝试了许多不同的 google 搜索组合，但无法找到对 <base> 元素的引用。我意识到你在 react-router 上工作，所以你知道你在说什么，但是我所有的搜索结果都直接使用了 history 库，就像问题中一样。
这个答案现在已经过时了。不推荐使用<base> 元素来设置基本名称。

【解决方案2】：

我现在遇到与 react-router@2.8.1 完全相同的问题

地址栏中的 url 更新正确，但 UI 上没有任何反应。如果我按 F5，它将起作用

仍在调查这个......

【讨论】：