升级React-Router并将hashHistory替换为browserHistory [英] Upgrading React-Router and replacing hashHistory with browserHistory

问题描述

我有一个使用react-router 1.x和hashHistory的bootstrap + react主题，我想删除哈希，因此请遵循

I have a bootstrap+react theme that was using react-router 1.x and hashHistory and I wanted to remove the hash so followed this advice. Initially I tried to do this while having the 1.x version and I was unable to do it so I've decided to upgrade react-router to 2.x. After installing react-router 2.x the app worked because it was still using hashHistory but when I replaced it with browserHistory:

• 它显示为灰色屏幕
• 应用程序的HTML内部仅包含<noscript data-reactid=".0"></noscript>标记
• React开发人员工具告诉我路由器内部有一个null
• 我还检查了网络"选项卡，所有文件均已正确下载，并且内容正确

• 令人惊讶的是，JavaScript控制台中没有打印任何内容，没有错误/没有错误(对此我感到非常震惊，但是我是新的React，我想知道什么在这种情况下做). 这是我对Router.jsx的更改:

• it showed a grey screen
• the HTML of the app had only the <noscript data-reactid=".0"></noscript> tag inside it
• the React Developer Tools showed me that the router had a null inside it
• I also checked the Network tab and all files were downloaded properly, and had the right content

• surprisingly the was nothing printed in the JavaScript Console, no error/no warnging (I'm really shocked about this, but I'm new React, I would like to know what to do in situations like this). Here are my changes to 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框架.

稍后编辑: 在这里，您可以使用hashHistory版本

Later Edit: Here you have the hashHistory version that works

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目录下找到.

The react code for both can be found under the src directory.

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

To run the app you need to have Elixir, Phoenix and Postgresql installed, to get backend dependencies( run $ mix deps.get), get frontend dependecies( npm install and bower install), to change the database username and password in config/dev.exs, to create and migrate the database mix ecto.create && mix ecto.migrate and finally run mix phoenix.server.

推荐答案

由于尚无解决方案，请在下面找到我的(简约)路由器版本，该版本对我有用.

Since there is no solution yet, find my (minimalistic) router version below, that is working for me.

依赖项:

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

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

History.js is not needed explicitly, since it is a dependency of react-router.

Webpack 确保添加

devServer: {
    historyApiFallback: true
}

到您的webpack.config.js，因为webpack-dev-server可能在正确路由时存在一些问题(主要是在向后导航方面).

to your webpack.config.js, since webpack-dev-server might have some issues routing correctly (mostly in terms of backwards navigation).

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

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

I would encourage you to try this code and leave out your hotloading stuff. Let me know if it helps and if there are any questions. I'm glad to edit my post as needed.

这篇关于升级React-Router并将hashHistory替换为browserHistory的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！