升级 React-Router 并用 browserHistory 替换 hashHistory答案

【问题标题】：Upgrading React-Router and replacing hashHistory with browserHistory升级 React-Router 并用 browserHistory 替换 hashHistory
【发布时间】：2016-09-18 05:24:19
【问题描述】：

我有一个使用 react-router 1.x 和 hashHistory 的 bootstrap+react 主题，我想删除散列，所以请遵循 advice。最初我尝试在拥有 1.x 版本时执行此操作，但我无法执行此操作，因此我决定将 react-router 升级到 2.x。安装 react-router 2.x 后，该应用程序运行正常，因为它仍在使用 hashHistory，但是当我用 browserHistory 替换它时：

显示灰屏
应用的 HTML 中只有 <noscript data-reactid=".0"></noscript> 标记
React 开发者工具显示路由器内部有一个null
我还检查了“网络”选项卡，所有文件都已正确下载，并且内容正确

令人惊讶的是，JavaScript 控制台中没有打印任何内容，没有错误/没有警告（我对此感到非常震惊，但我是 React 新手，我想知道该怎么做像这样的情况）。这是我对Router.jsx 的更改：

 import React from 'react'
 import {render} from 'react-dom'
-import {Router} from 'react-router'
+// import {Router} from 'react-router'
+import { Router, Route, Link, browserHistory } from 'react-router'
+// import { useRouterHistory } from 'react-router'
+// import { createHashHistory } from 'history'
+// import { createBrowserHistory } from 'history'`

 import History from '../components/layout/navigation/classes/History.js';

 import Routes from './Routes.jsx';

+// const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })
+
 var rootInstance = render((
-    <Router history={History}>
+    <Router history={browserHistory}>
         {Routes}
     </Router>
 ), document.getElementById('smartadmin-root'));`

后端使用Phoenix Framework。

后期编辑：在这里，您可以使用 hashHistory 版本

https://gitlab.com/blockbuster/react-router-2-with-hash-working/tree/master

这是browserHistory 版本，没有：

https://gitlab.com/blockbuster/react-router-2-with-browserHistory-not-working/tree/master

两者的反应代码都可以在src目录下找到。

要运行应用程序，您需要安装 Elixir、Phoenix 和 Postgresql，以获取后端依赖项（运行 $ mix deps.get），获取前端依赖项（npm install 和 bower install），以更改数据库config/dev.exs中的用户名和密码，创建和迁移数据库mix ecto.create && mix ecto.migrate，最后运行mix phoenix.server。

【问题讨论】：

如果你能分享代码，会节省很多时间。
@HazardouS 查看我在上面所做的编辑。希望对您有所帮助。

标签： reactjs webpack react-router phoenix-framework

【解决方案1】：

您是否在 Router.jsx 中尝试过这种方式？

import React from 'react'
import {render} from 'react-dom'
import { Router, Route, Link, browserHistory, useRouterHistory } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'

import History from '../components/layout/navigation/classes/History.js';

import Routes from './Routes.jsx';

const appHistory = useRouterHistory(createBrowserHistory)({ queryKey: false })

var rootInstance = render((
    <Router history={appHistory}>
        {Routes}
    </Router>
), document.getElementById('smartadmin-root'));

【讨论】：

我在您的代码中的任何地方都没有看到 createHashHistory 定义。我不清楚您是想导入它（可能是 History 变量）还是想改用 createBrowserHistory。请澄清！
对不起，它应该是 createBrowserHistory。我刚刚更新了代码。

【解决方案2】：

由于还没有解决方案，请在下面找到我的（简约）路由器版本，这对我有用。

依赖关系：

react@15.1.0
react-dom@15.1.0
react-router@2.4.0

History.js 不是明确需要的，因为它是 react-router 的依赖项。

网页包 确保添加

devServer: {
    historyApiFallback: true
}

到你的 webpack.config.js，因为 webpack-dev-server 可能有一些正确路由的问题（主要是向后导航）。

import React from 'react';
import {render} from 'react-dom';
import {Router, Route, IndexRoute, browserHistory} from 'react-router';

import {Routes} from './Routes'; // your routes file

render(
    <Router history={browserHistory}>
        {Routes}
    </Router>,
    document.querySelector('#smartadmin-root')
);

我会鼓励您尝试此代码并忽略您的热加载内容。让我知道它是否有帮助以及是否有任何问题。我很高兴根据需要编辑我的帖子。

【讨论】：