reactjs – 升级React-Router并用browserHistory替换hashHistory

我有一个使用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 Developer Tools向我展示了路由器里面有一个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

这里是浏览器历史版本：

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,创建和迁移数据库混合ecto.create&&混合ecto.migrate,最后运行mix phoenix.server.

import React from 'react'
import {render} from 'react-dom'
import { Router,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'));