我使用React.js + Webpack模式。我在package中添加了——history-api-fallback参数。json文件。此时页面刷新工作正常。

每次我修改代码时，网页都会自动刷新。

"scripts": {
  "start": "rimraf build && cross-env NODE_ENV='development' webpack --mode development && cross-env NODE_ENV=development webpack-dev-server --history-api-fallback",
  ...
}

刷新DOM组件后无法得到403错误，这很简单。

只需在Webpack配置中添加这一行，'historyApiFallback: true '。这帮了我一整天的忙。

产品堆栈:React, React Router v4, BrowswerRouter, Express.js, Nginx

User BrowserRouter for pretty URLs File app.js import { BrowserRouter as Router } from 'react-router-dom' const App = () { render() { return ( <Router> // Your routes here </Router> ) } } Add index.html to all unknown requests by using /* File server.js app.get('/*', function(req, res) { res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) { if (err) { res.status(500).send(err) } }) }) bundle Webpack with webpack -p run nodemon server.js or node server.js

你可能想让nginx在服务器块中处理这个问题，忽略第2步:

location / {
    try_files $uri /index.html;
}

如果你使用Apache作为你的web服务器，你可以在你的。htaccess文件中插入这个:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

我正在使用react:“^16.12.0”和react-router:“^5.1.2” 这种方法是万能的，可能是最简单的入门方法。

如果你通过AWS Static S3 hosting和CloudFront托管React应用程序

这个问题由CloudFront以403 Access Denied消息响应，因为它期望/some/other/路径存在于我的S3文件夹中，但该路径只存在于React路由器的内部路由中。

解决方案是设置一个分发错误页面规则。转到CloudFront设置并选择您的发行版。接下来，进入“错误页面”选项卡。单击“创建自定义错误响应”，并添加403条目，因为这是我们获得的错误状态代码。

将响应页路径设置为/index.html，状态代码设置为200。

最终的结果让我惊讶于它的简单。索引页被提供，但URL保存在浏览器中，因此一旦React应用程序加载，它就会检测URL路径并导航到所需的路由。

错误页403规则

将此添加到webpack.config.js:

devServer: {
    historyApiFallback: true
}