如何防止iis默认未找到页面并显示自定义reactjs未找到页面

sim*_*shi 1 iis configuration reactjs react-router react-router-dom

所以我有一个部署在 IIS 上的 React 应用程序,我正在使用 React 路由器,我的路由和它们的顺序都很好,一切都在开发模式下本地工作正常,

我的routes.js 文件返回这样的路由:

<Router history={history}>
    <Switch>
      {/* there are some other routes that are removed from here */}
      {/* token is the jwt token for user */}
      {!token && <Route path="/Home" component={HomePage} />}

      <Route path="/" exact>
        {!!token ? <Redirect to="/Dashboard" /> : <Redirect to="/Home" />}
      </Route>
      <Route path="*" exact component={FourOFour} />
    </Switch>
  </Router>
Run Code Online (Sandbox Code Playgroud)

我的“未找到页面”有一个 jsx 文件,它返回组件FourOFour

正如我所说,包括未找到页面在内的所有内容在我的计算机上的开发模式下都显示完全正常。但是当我在 IIS 上部署 React 应用程序时,我的自定义未找到页面不会显示,而是显示 IIS 的默认 404 页面,如何让 ISS 停止扰乱我的路由?

PS:我知道这是服务器的工作来处理 404 等错误,这是默认行为,我也尝试了一些我在网上找到的建议,但其中一些建议毁了一切,有些则不清楚是什么发生,

所以我希望得到 IIS 配置步骤的清晰解释,任何建议都值得赞赏

更新

我采取的步骤

首先,我在客户端的路由器中处理了错误 404,它不起作用,因为 iis 对于常见错误(例如 404、500 等)有默认的 html 页面,并且它在请求到达客户端之前就捕获了错误,所以我发现这是服务器而不是客户端处理的问题,然后我在iis中尝试了不同的配置,因为iis为每个站点都有一个“错误页面”部分,在本部分中您可以更改它处理此类错误的方式,对于每种类型的错误(实际上是每种状态代码),它都有三个选项:

  1. 将静态文件中的内容插入到错误响应中

你可以给一个静态 html 页面的路径,它就会显示出来,但正如我上面所说,我的未找到页面是用 jsx 文件编写的,并且其中有大量的 java 脚本代码,它不是不可能将所有内容都放在 html 页面中并使用这种方式,但这会让我的代码变脏,我更喜欢一种不会让我的代码混乱的方式,而且我尝试这种方式只是为了看看它是否有效,但它显示了这个错误:“您正在查找的资源已被删除、更名或暂时不可用。”

  1. 在此站点中执行一个 url

这对我来说可能是最好的解决方案,我可以在路由中设置一个“/404”路径,重定向到我的未找到页面,一切都会看起来漂亮干净,但遗憾的是它不起作用,看起来iis是不重定向到我的特定网址,而是显示白屏,这比默认的 404 页面更糟糕......

  1. 响应 302 重定向

这不是我的解决方案,因为我不想重定向到我的应用程序之外的页面

我也非常仔细地阅读了这个答案,但仍然不知道该怎么做

小智 5

由于您提到在开发模式下本地一切工作正常,因此 IIS 中的设置可能有问题。以下步骤值得尝试: (1) 打开 IIS 管理器 (2) 识别您正在使用的应用程序 (3) 在主窗格中打开 \xe2\x80\x9cError Pages\xe2\x80\x9d (4) 使用添加(如果您没有\xe2\x80\x99t 有 404 状态代码)或在“操作”窗格中编辑(如果您已有 404 状态代码) (5) 在 \xe2\x80\x9cStatus Code\xe2\x80\ 下输入 404 x9d (6) 对于响应操作,选择 \xe2\x80\x9c在此站点上执行 URL\xe2\x80\x9d 并输入自定义错误页面的 URL。注意:请确保您使用的是相对路径。\n此外,IIS 的版本可能会导致实际中存在一些差异。如果您仍有任何问题,请随时与我们联系,更多详细信息可以帮助我们更好地解决您的问题。

\n