升级 React-Router 并用 browserHistory 替换 hashHistory

IT技术 reactjs webpack react-router phoenix-framework
2021-04-29 23:07:38

我有一个使用 react-router 1.x 和 hashHistory 的 bootstrap+react 主题，我想删除散列，所以遵循了这个建议。最初我尝试在使用 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

这是没有的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。

2个回答

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

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

依赖项：

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

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

其它你可能感兴趣的问题
上一篇未处理的拒绝 (ChunkLoadError)：加载块 1 失败 下一篇带有嵌套 JSON 的 React/Redux mapStateToProps