如果您正在使用“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将处理它。

Webpack开发服务器有一个选项可以启用此功能。打开包。Json和添加——history-api-fallback。 这个解决方案对我很有效。

react-router-tutorial

试着加一个”。Htaccess "文件内的公共文件夹与下面的代码。

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

RewriteRule ^ /index.html [L]

请求数据的另一种方式(即使您立即指向url)是使每个组件都有一个调用最后一个参数的方法，如/about/test。

然后，在状态提供程序中，有一个连接到您想要请求数据的组件的函数。

我们使用Express.js的404处理方法。

// Path to the static React build directory
const frontend = path.join(__dirname, 'react-app/build');

// Map the requests to the static React build directory
app.use('/', express.static(frontend));

// All the unknown requests are redirected to the React SPA
app.use(function (req, res, next) {
    res.sendFile(path.join(frontend, 'index.html'));
});

这招很管用。现场演示是我们的网站。

将此添加到webpack.config.js:

devServer: {
    historyApiFallback: true
}