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

Question

我有一个使用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

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

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

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