如何使用 react-router 处理生产构建中的刷新答案

【问题标题】：How to handle the refresh in production build using react-router如何使用 react-router 处理生产构建中的刷新
【发布时间】：2017-05-05 17:12:00
【问题描述】：

我有一个使用反应路由器的应用程序。我已经设置了我的开发环境来使用它，当我想刷新页面时我没有问题，或者服务器自己做，但是当我进行生产构建时。如果任何用户在应用程序中使用刷新按钮，则会出现 404 错误。

我知道在服务器中（我的产品构建将在 ISS srv 中），react router 所创建的应用程序试图访问的路由不存在，那么我该如何解决这个问题？
我需要做什么以及如何去做？
我对此很陌生。

感谢您的时间和帮助！

【问题讨论】：

【解决方案1】：

我将尝试解释 react 路由器如何管理您的应用程序的状态。

假设你有以下路由器

<Router>
   <Route to="/" component={Home}>
     <Route to ="/about" component={About} />
    </Route>
<Router>

假设您在应用程序的主页上，即/。现在说你在主页上使用Link 导航到/about url。这将由您的反应路由器提供服务。所以一切正常。

现在说，当您在/about 路线时，您刷新页面。现在网络浏览器像任何页面请求（无论它是否是单页应用程序）都会向您的后端服务器发送请求以获取页面。因此，您需要在后端为第一个页面加载配置路由。

现在您必须使用 webpack 编译您的 react 组件并获得捆绑输出，对吗？这是你放在你的html文件中的吗？现在所有路由都只提供这个 html 文件。

当您有编译好的 JS 文件时，当页面在 react-router 上呈现时，页面会自动呈现。

现在配置路由有多种方法。其中之一是在后端添加所有路由，这些路由使用包含您的反应代码的已编译 javascript 呈现相同的 html 文件。另一个可以使用 nginx 之类的东西并仅从那里返回 html。

【讨论】：

【解决方案2】：

对于您的生产设置，您需要设置 ISS 服务器，以便所有传入的 URL 请求都将返回 index.html 文件。我不确定这将如何在 ISS 中完成，但在 Apache 之类的东西中，您会使用 URL 重写。

之所以要始终返回您的 index.html，是因为 index.html 本质上是您的 react 应用程序，react-router 组件将处理路由并根据 URL 呈现必要的内容。

您不会重写指向您的静态资产（css/js/pngs/etc. 文件）的 URL。为方便起见，您可能希望将所有静态文件放在您网站的 /static/ 网址下。

因此，您希望您的服务器配置为（* 是通配符）：

/static/* 返回 URL 中请求的任何静态资源

/* 返回您的 index.html 页面

之所以在你的开发环境中运行时不用担心这一点，是因为 webpack-dev-server 被配置为为你完成这一切。

【讨论】：