Question

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

显示灰色屏幕
该应用的HTML中只有<p>标记
React Developer Tools向我展示了路由器里面有<noscript data-reactid=".0"></noscript>
我还检查了“网络”标签，所有文件都已正确下载，并且内容正确
令人惊讶的是，JavaScript控制台中没有打印，没有错误/没有改动（我对此感到非常震惊，但我是新的React，我想知道是什么在这样的情况下做）。以下是我对null的更改：
```
Router.jsx
```

后端使用Phoenix Framework。

稍后编辑：这里有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'));`版本可以使用

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

以下是hashHistory版本没有：

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

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

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

Answer 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'));

Answer 2

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

<强>依赖关系：

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

不需要显式的History.js，因为它是react-router的依赖。

<强>的WebPack 确保添加

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')
);

我建议您尝试使用此代码并省略您的热门内容。让我知道它是否有帮助，如果有任何问题。我很高兴根据需要编辑我的帖子。

升级React-Router并用browserHistory替换hashHistory

2 个答案: