Javascript 如何使用react路由器处理生产构建中的刷新

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

我知道在服务器中（我的prod构建将在ISS srv中），react router创建的应用程序试图访问的路由不存在，因此我如何解决该问题？
我需要做什么以及如何做？
这方面我还不太熟悉

---

谢谢你的时间和帮助

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

假设你有以下路由器

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

假设您在应用程序的主页上，即

/

。现在，假设您使用主页上的

链接导航到
/about
url。这将由您的路由器提供服务。所以事情进展顺利

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

现在，您必须编译您的react组件，可能使用webpack并获得捆绑包输出，对吗？这是你放在html文件中的吗？现在，对于所有路由，仅提供此html文件

由于您有已编译的JS文件，当页面在
react router
上呈现时，会自动呈现页面

现在，配置路由有多种方法。其中之一是在后端添加所有路由，这些路由使用包含react代码的已编译javascript呈现相同的html文件。另一种方法是使用类似于
nginx
的东西，并仅从那里返回html。
我将尝试解释react router如何管理应用程序的状态

假设你有以下路由器

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



假设您在应用程序的主页上，即
/
。现在，假设您使用主页上的
链接导航到
/about
url。这将由您的路由器提供服务。所以事情进展顺利

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

现在，您必须编译您的react组件，可能使用webpack并获得捆绑包输出，对吗？这是你放在html文件中的吗？现在，对于所有路由，仅提供此html文件

由于您有已编译的JS文件，当页面在
react router
上呈现时，会自动呈现页面

现在，配置路由有多种方法。其中之一是在后端添加所有路由，这些路由使用包含react代码的已编译javascript呈现相同的html文件。另一种方法是使用类似于
nginx的东西，并仅从那里返回html。
对于生产设置，您需要设置ISS服务器，以便所有传入的URL请求都将返回index.html文件。我不确定在ISS中如何做到这一点，但在Apache之类的软件中，您可以使用URL重写

您希望始终返回index.html的原因是index.html本质上是您的react应用程序，react router组件将处理路由并根据URL呈现所需内容

您只需要不重写指向静态资产（css/js/pngs/etc.文件）的URL。为了方便起见，您可能希望在站点的URL下（例如，
/static/
URL）提供所有静态文件

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

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

/*
返回index.html页面

在开发环境中运行时，您不必担心这一点的原因是，webpack dev server已配置为为为您执行所有这些操作。
对于生产设置，您需要设置ISS服务器，以便所有传入的URL请求都将返回index.html文件。我不确定在ISS中如何做到这一点，但在Apache之类的软件中，您可以使用URL重写

您希望始终返回index.html的原因是index.html本质上是您的react应用程序，react router组件将处理路由并根据URL呈现所需内容

您只需要不重写指向静态资产（css/js/pngs/etc.文件）的URL。为了方便起见，您可能希望在站点的URL下（例如，
/static/
URL）提供所有静态文件

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

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

/*
返回index.html页面

在开发环境中运行时，您不必担心这一点的原因是，webpack dev server已配置为为为您完成这一切。
索引页（应用程序的“主页”）也会发生这种情况，还是仅在其他页面上发生？索引页（应用程序的“主页”）也会发生这种情况或者只在其他页面上？我的编译只有一个app.js文件和index.html。那么，你的意思是我必须为我的每条路线制作一个特殊的文件？或者我如何控制，只需为每个路由呈现index.html。您在index.html中调用app.js，对吗？是的，这样就需要（[“app.js”]，函数（app）{}）；我的编译只有一个app.js文件和index.html.So，你的意思是我必须为