Question

在页面http://localhost/about上刷新时未找到代码报告404。但是如果将browserHistory更改为hashHistory，它可以正常工作。

这是我的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 browserHistory not working和React-router urls don't work when refreshing or writting manually上的问题。对于第一个，我已经设置了绝对路径的路径，但仍然没有工作。对于第二个，我尝试导入快速但失败（＆＃39;未捕获的TypeError：无法读取属性＆＃39;原型＆＃39;未定义＆＃39;）。

Answer 1

为了扩展Phi Nguyen的答案，hashHistory的工作原理和browserHistory失败是因为hashHistory是一种“hack＆＃39;或解决方法，允许您的应用在没有浏览器注意的情况下操作URL并向您的服务器发送GET请求。基本上哈希之后的一切都被忽略了。

browserHistory通常是首选，因为它看起来更好，但您不再获得散列解决方法，并且您需要其他方法来阻止您的浏览器尝试向您的服务器发送请求。如果您使用webpack，则有一种简单的方法可以使所有请求回退到单个请求。例如：

GET到http://localhost:8080/和GET到http://localhost:8080/about都会回退到http://localhost:8080/并且react-router会处理/ about。（这就是你可以导航到/关于罚款的原因，但是如果你刷新就会出现404错误，那么你发送GET到/关于哪个不是{not}＆t存在于您的服务器上）

要执行此操作，您需要实现名为history api fallback的webpack功能。有两种方法可以做到这一点。

在react-router docs / tutorial中，您可以将start脚本设置为如下所示：

"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

对于有此错误的人来说，--history-api-fallback是重要的部分。

或者您可以更改您的webpack.config.js文件，以便在您的开发服务器上处理此问题。

  devServer: {
    historyApiFallback: true,
    ...other stuff..
  },

Answer 2

另一种简单且低成本的方法是让Apache将任何请求映射到您的React应用程序。例如：http://localhost/about内部通过http://localhost/[my-own-html-file.html]

例如，如果我们的React应用程序从index.html开始，您需要在React应用程序上创建一个.htaccess文件并插入以下代码：

# Map all non-existing URLs to be processed by index.html,
# so any URL that doesn't point to a JS file, CSS file, etc etc...
# goes through my React app.

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_URI} !=/favicon.ico
  RewriteRule ^ index.html [L]
</IfModule>

BTW，这个HTACCESS代码改编自Drupal 8： https://github.com/drupal/drupal/blob/8.2.x/.htaccess