reactjs - 为什么我对 React 应用程序中的子路径的 HTTP GET 调用给出了 404 NOT Found 而不是 HTML？

Question

当我尝试对我的 react 应用程序的子路径执行 GET 调用 时，我收到了 404。当我对主页执行此操作时，它会正确返回 HTML。当仅通过浏览器访问子路径时，我的网页会正确呈现。我正在使用 React 版本 16.9.0。我在 Azure 应用服务中托管 Web 应用程序。

这个问题的原因是使用了一个可以检查网站死链接的外部程序。目前，我每次调用子路径都会收到 404。

在 Postman 中获取调用:

www.test.be => works

www.test.be/custom-route => gives a 404

这是我的 React Router Wrapper 组件:

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from 'home/containers/home-container.js';
import NotFoundPage from './error-pages/not-found-page';
import Questions from 'questions/containers/question-container.js';

const Body = () => {
  return (
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/questions" component={Questions} />
      <Route component={NotFoundPage} />
    </Switch>
  );
};

export default Body;

这是我的 web.config 文件:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.web>
    <httpRuntime requestPathInvalidCharacters="&lt;,&gt;,*,&amp;,:,\\,?" />
  </system.web>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <remove name="X-Powered-By" />
      </customHeaders>
    </httpProtocol>
    <rewrite>
      <rules>
        <rule name="HTTPSs">
          <match url="(.*)"/>
          <conditions>
            <add input="{HTTPS}" pattern="Off"/>
            <add input="{HTTP_HOST}" negate="true" pattern="^localhost" />
          </conditions>
          <action type="Redirect" url="https://{HTTP_HOST}/{R:1}"/>
        </rule>
        <rule name="ReactRoutes" stopProcessing="true">
          <match url=".*" />
          <conditions>
            <add input="{HTTP_METHOD}" pattern="^GET$" />
            <add input="{HTTP_ACCEPT}" pattern="^text/html" />
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
    <security>
      <requestFiltering allowDoubleEscaping="true"/>
    </security>
  </system.webServer>
</configuration>

Answer 1

你没有提供完整的细节，但如果我理解正确，它可以帮助你解决你的问题，如果你在服务器上有这个问题并且当你打开主页时它工作正常并且当打开子路径时它会转到404 页面，将此添加到您的 .htaccess 文件

RewriteBase /
RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]