如果你有一个回退到你的index.html，确保在你的index.html文件中你有这个:

<script>
  System.config({ baseURL: '/' });
</script>

这可能因项目而异。

当我使用apache(Httpd)服务器时，我也面临同样的问题。我解决了咆哮这种方式，为我工作100%。

步骤1:

进入/etc/httpd/conf/httpd.conf /对于新版本，进入etc/apache2/apache2.conf 将AllowOverride None更改为AllowOverride All。 重启apache服务器。

步骤2:

构建完成后，将.htaccess文件放入根文件夹。

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

我也遇到过同样的问题，这个解决方案对我们很有效……

背景:

我们在同一台服务器上托管多个应用程序。当我们刷新服务器时，它不知道该在目标文件夹的哪个位置查找特定应用程序的索引。上面的链接将把你带到我们的工作…

我们正在使用:

文件package.json:

"dependencies": {
  "babel-polyfill": "^6.23.0",
  "ejs": "^2.5.6",
  "express": "^4.15.2",
  "prop-types": "^15.5.6",
  "react": "^15.5.4",
  "react-dom": "^15.5.4",
  "react-redux": "^5.0.4",
  "react-router": "^3.0.2",
  "react-router-redux": "^4.0.8",
  "redux": "^3.6.0",
  "redux-persist": "^4.6.0",
  "redux-thunk": "^2.2.0",
  "webpack": "^2.4.1"
}

我的webpack.config.js文件:

/* eslint-disable */
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const babelPolyfill = require('babel-polyfill');
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/views/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    'babel-polyfill', './app/index.js'
  ],
  output: {
    path: __dirname + '/dist/your_app_name_here',
    filename: 'index_bundle.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      query : {
          presets : ["env", "react", "stage-1"]
      },
      exclude: /node_modules/
    }]
  },
  plugins: [HTMLWebpackPluginConfig]
}

我的index.js文件

import React from 'react'
import ReactDOM from 'react-dom'
import Routes from './Routes'
import { Provider } from 'react-redux'
import { createHistory } from 'history'
import { useRouterHistory } from 'react-router'
import configureStore from './store/configureStore'
import { syncHistoryWithStore } from 'react-router-redux'
import { persistStore } from 'redux-persist'

const store = configureStore();

const browserHistory = useRouterHistory(createHistory) ({
  basename: '/your_app_name_here'
})
const history = syncHistoryWithStore(browserHistory, store)

persistStore(store, {blacklist: ['routing']}, () => {
  console.log('rehydration complete')
})
// persistStore(store).purge()

ReactDOM.render(
    <Provider store={store}>
      <div>
        <Routes history={history} />
      </div>
    </Provider>,
  document.getElementById('mount')
)

我的app.js文件:

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/dist'));
// app.use(express.static(__dirname + '/app/assets'));
app.set('views', __dirname + '/dist/your_app_name_here');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

app.get('/*', function (req, res) {
    res.render('index');
});

app.listen(8081, function () {
  console.log('MD listening on port 8081!');
});

如果您正在使用“create-react-app”命令，

生成一个React应用程序，然后生成包。json文件需要有一个更改，以在浏览器中正常运行的产品构建React SPA。打开文件包。Json，并添加以下代码段，

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

这里最重要的部分是“——history- API -fallback”，用于启用历史API回调。

如果使用Spring或任何其他后端API，有时会出现404错误。因此，在这种情况下，您需要在后端有一个控制器，将任何请求(您想要的)转发给index.html文件，由react-router处理。下面演示了一个使用Spring编写的示例控制器。

@Controller
public class ForwardingController {
    @RequestMapping("/<any end point name>/{path:[^\\.]+}/**")
    public String forward(HttpServletRequest httpServletRequest) {
        return "forward:/";
    }
}

例如，如果我们取一个后端API REST端点为“abc”(http://localhost:8080/abc/**)，任何到达该端点的请求都将重定向到React应用程序(index.html文件)，然后React -router将处理它。

我还没有使用服务器端渲染，但我遇到了与OP相同的问题，其中Link在大多数时候似乎工作正常，但当我有一个参数时就失败了。我将在这里记录我的解决方案，看看它是否对任何人都有帮助。

我的主要JSX内容包括:

<Route onEnter={requireLogin} path="detail/:id" component={ModelDetail} />

这对于第一个匹配的链接很有效，但是当嵌套在该模型的详细页面上的< link >表达式中的:id发生变化时，浏览器栏中的URL会发生变化，但页面的内容最初并没有改变以反映链接的模型。

问题是我已经使用props.params.id在componentDidMount中设置了模型。组件只挂载一次，因此这意味着第一个模型是粘贴在页面上的模型，随后的链接更改了道具，但保持页面看起来不变。

在componentDidMount和componentWillReceiveProps的组件状态中设置模型(其中它基于下一个道具)可以解决问题，并且页面内容更改以反映所需的模型。

前面的答案并不能解决您想要使用代理通道的浏览器路由器，而又不能使用root的问题。

对我来说，解决办法很简单。

假设您有一个指向某个端口的URL。

location / {
  proxy_pass http://127.0.0.1:30002/;
  proxy_set_header    Host            $host;
  port_in_redirect    off;
}

现在由于浏览器路由器，子路径被破坏了。但是，你知道子路径是什么。

这个问题的解决方案是什么?对于子路径/联系人

# Just copy paste.
location /contact/ {
  proxy_pass http://127.0.0.1:30002/;
  proxy_set_header    Host            $host;
}

我试过的其他方法都不管用，但这个简单的方法奏效了。