我的React应用程序中有一个web.config（导入到index.tsx中）：
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="index.html" />
</rule>
</rules>
</rewrite>
<staticContent>
<remove fileExtension=".json" />
<remove fileExtension=".woff2" />
<remove fileExtension=".png" />
<remove fileExtension=".svg" />
<remove fileExtension=".ico" />
<remove fileExtension=".webmanifest" />
<mimeMap fileExtension=".json" mimeType="application/json" />
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />
<mimeMap fileExtension=".png" mimeType="image/png" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<mimeMap fileExtension=".ico" mimeType="image/vnd.microsoft.icon" />
<mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
</staticContent>
</system.webServer>
</configuration>这个应用程序是在一个子域（https://example.com/app/）上运行的，如果我试图转到一个在开发模式下运行得很好的子路由（比如https://example.com/app/page1），在服务器上返回一个页面未找到错误。我做错了什么？
1条答案
按热度按时间3zwjbxry1#
由于您提供的错误信息较少，我只能和您分享一些我的想法。我的表达可能不够准确，希望您能理解我的薄弱英语。
一旦你有了ReactJS应用程序的生产版本。它会创建一个index.html文件来服务整个应用程序。所有的请求都必须首先是index.html，然后ReactRouter根据URL中的查询来提供内容。当我们使用主URL访问应用程序时，它会点击
index.html并正常工作。如果你直接在浏览器中转到子URL，Web服务器找不到任何具有该名称的文件。2在这种情况下，将向用户返回404错误消息。由于6.0版本之后的更新，父路由必须添加
/*，否则将无法导航更深，父路由将不再匹配，因此子路由将永远不会呈现。<Route path="/home" element={<Home/>}></Route>更改为
<Route path="/home/*" element={<Home/>}></Route>如果你希望所有的路由都由React Router定义，那么只有你的后端，不管是什么路由，都会返回
index.html。剩下的都留给React Router。然后你所要做的就是修改后端服务器。如果使用HashRouter，将BrowserRouter改为HashRouter。这样，所有的请求都将被定向到index.html页面，并且服务器端不需要任何配置。此外，子路由页刷新并报告错误，而从父页的正常访问不报告错误。原因可能是主文件
index.html中的js导入路径被写成了绝对路径;需要通过相对路径导入，或者导入的js文件地址错误，需要检查。我与您分享一个thread，它提供了非常详细的解释和潜在的解决方案。