React-Router 2.0浏览器刷新时历史记录不起作用 [英] React-router 2.0 browserHistory doesn't work when refreshing
问题描述
在页面 http://localhost/about 上刷新时，找不到以下代码报告404.但是，如果将browserHistory更改为hashHistory，则可以正常工作.
Below codes report 404 not found when refreshing on page http://localhost/about. But if browserHistory is changed to hashHistory, it works fine.
这是我的js文件.
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory, hashHistory } from 'react-router';
import $ from 'jquery';
class App extends Component {
render() {
return (
<div>
<h1>APP!</h1>
<Link to="/about">/about</Link>
{this.props.children}
</div>
)
}
}
class About extends React.Component {
render() {
return (
<div>
<h2>About 33</h2>
</div>
)
}
}
var routes = (
<Router history={hashHistory}>
<Route path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/wealth" component={WealthExpectation} />
</Router>
)
$(document).ready(function() {ReactDOM.render(routes, document.getElementById("hello"))});
还有html文件.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello React</title>
<script type="text/javascript" src="/static/js/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="/static/js/script.js"></script>
<!-- build:css -->
<link rel="stylesheet" type="text/css" href="/static/bower_modules/c3/c3.min.css">
<!-- endbuild -->
</head>
<body>
<div id="hello">a</div>
<div id="world"></div>
</body>
</html>
我已经在 react-router v2.0浏览器上阅读了问题工作和 React-router URLs'手动刷新或手写时无法工作.对于第一个，我已经将路径设置为绝对路径，但是仍然无法正常工作.对于第二个，我尝试导入express但失败了("Uncaught TypeError:无法读取未定义的属性'prototype').
I've read the questions on react-router v2.0 browserHistory not working and React-router urls don't work when refreshing or writting manually. For the first one, I've already set the path to absolute path, but still not working. For the second one, I tried to import express but failed ('Uncaught TypeError: Cannot read property 'prototype' of undefined').
推荐答案
要进一步解释Phi Nguyen的答案，hashHistory起作用且browserHistory失败的原因是，hashHistory是一种"hack"或替代方法，可让您的应用操纵URL无需浏览器注意并向您的服务器发送GET请求.基本上，哈希之后的所有内容都会被忽略.
To expand on Phi Nguyen's answer the reason hashHistory works and browserHistory fails is because hashHistory is sort of a 'hack' or workaround to allow your app to manipulate the URL without the browser noticing and sending a GET request to your server. Essentially everything after the Hash is ignored.
browserHistory，因为它看起来更好，但是您不再获得哈希解决方法，并且需要其他方法来防止浏览器尝试向服务器发送请求.如果您使用的是webpack，则有一种简单的方法可以使所有请求都回退到单个请求.例如:
browserHistory is generally preferred because it looks better but you no longer get the hash workaround and you need other means of preventing your browser from trying to send requests to your server. IF you are using webpack there is a simple way to essentially make all requests fallback to a single request. For example:
GET到 http://localhost:8080/和GET到
GET to http://localhost:8080/ AND a GET to http://localhost:8080/about would both fallback to http://localhost:8080/ and react-router would deal with the /about. (this is the reason you are able to navigate to /about fine, but if you refresh you get a 404 error, you're sending a GET to /about which doesn't exist on your server)
要执行此操作，您需要实现一个称为history api fallback的webpack功能.有两种方法.
To do this you need to implement a webpack feature called history api fallback. There's two ways of doing that.
从react-router文档/教程中，您可以将start脚本设置为如下所示:
From the react-router docs / tutorial you can setup your start script to look like this:
"start": "webpack-dev-server --inline --content-base . --history-api-fallback"
--history-api-fallback是任何出现此错误的人的重要内容.
Where the --history-api-fallback is the important piece for anyone with this error.
或者您可以更改您的webpack.config.js文件以在开发服务器上进行处理.
OR you can change your webpack.config.js file to look handle this on your dev server.
devServer: {
historyApiFallback: true,
...other stuff..
},
这篇关于React-Router 2.0浏览器刷新时历史记录不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
