反应路由器+ iis？如何启用路由答案

【问题标题】：React Router + iis? How to enable routing反应路由器+ iis？如何启用路由
【发布时间】：2018-08-08 20:44:53
【问题描述】：

我正在使用 react-router 并将其放入其中，但我注意到当我从登录页面开始并遍历所有路线时它可以工作。如果我只输入路径 url，我会得到 404。

我猜这与服务器不知道如何将其传递给我的客户端路由有关吗？

我找到了this 的帖子，但我对某些人所说的更新 web.config 文件的答案有点困惑，但我没有，因为它只是一个 Reactjs。

编辑

这是我现在要重写的内容

当我尝试导航到不是索引页面的 URL 时，我现在得到一个白页。

当我查看控制台时。我明白了

Uncaught SyntaxError: Unexpected token <

转到 main.js 并抱怨这个 "<!DOCTYPE html>" 似乎我的 index.html 已合并到 javascript 文件中。

【问题讨论】：

你必须将你的服务器配置为为每个路由提供index.html，以便 React Router 可以在浏览器中处理路由加载后。
我该怎么做？

标签： reactjs iis url-rewriting react-router

【解决方案1】：

让 React-Router 与 IIS 一起工作的关键是设置 URL 重写规则。在查看了其他人如何使用 IIS 设置 AngularJS SPA 应用程序后，我提出了以下解决方案。

在您的服务器上下载并安装URL Rewrite（开发和生产）

设置规则以捕获任何不是文件和不是目录的 url 路由。或者，您可以否定您希望定期提供的任何实际目录。更多信息可以在这里找到Microsoft's Documentation

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
  <rewrite>
    <rules>
      <rule name="ReactRouter Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          <add input="{REQUEST_URI}" pattern="^/(docs)" negate="true" />
        </conditions>
        <action type="Rewrite" url="index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

在您的基本 html 页面 (index.html) 中，为您的应用添加一个带有 href 属性的标签。

<base href='/path/to/my/app'/>

【讨论】：

好的，我安装了 Url Rewrite，我做了一个 web.config 并粘贴到你的代码中。然后我添加到正文 ' 但我不知道该放什么作为路径，或者我是否把它放在正确的区域。
@mohit 你能告诉位置.. 在哪里添加上面的 web.config 文件。

【解决方案2】：

要扩展一点，您确实需要 Mohit 解释的 URL 重写包，但您不需要编写自己的 web.config 文件，如果需要，您可以直接从 IIS 管理器中完成。

安装 URL Rewrite 后，您可能需要重新启动或重新启动 IIS，您应该会在站点的仪表板上看到它。我在站点级别而不是服务器级别执行此操作。

您将在其中添加一条规则。它必须使用 正则表达式 与模式 .* 匹配请求 URL 的模式这将匹配浏览器发送的所有 url。

在条件中，您需要两个必须匹配所有的条件。您需要两个输入：

{REQUEST_FILENAME} 不是文件
{REQUEST_FILENAME} 不是目录

这些不需要任何模式。

最后，在 Action 部分中，您需要 Rewrite 将重写 url 用作 / 附加查询字符串。这将使所有内容都发送到 react-router 而不会被服务器吸收。

此时您可能希望停止处理更多规则，除非您还有其他不相关的业务逻辑也需要运行。

这将配置 IIS 以将所有请求发送到站点的根目录，这应该是 IIS 中设置的默认文档之一，最有可能是 index.html。 React-router 会从那里接收它。

【讨论】：

我想我做了你写的，但它仍然无法正常工作。我现在得到一个空白页（不再是 404）。我确实在控制台上看到了一些东西，但不确定它是否相关：Uncaught SyntaxError: Unexpected token <. html>" 。我发布了我的 urlrewite 的屏幕截图
url 重写看起来不错。至于语法错误，似乎有些东西没有正确编译。
当我导航到 http:myhomepage 时，一切正常。当我遇到问题时，它不是 http:myhomepage/somepage 。所以我不太确定这是一个编译问题
我可能明白了，我有 src="main.js" 但我认为通过这个 url 重写我需要 "/main.js"。
虽然我还不确定如何让 webpack 以这种方式构建“src”。我正在手动编辑文件。

【解决方案3】：

我使用 Plesk 作为主机将这个 web.config 文件添加到我的一些 PROD 页面中。我已经手动将此 web.config 添加到 React 页面根文件夹中，希望这可能适用于任何 IIS 服务器：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.web>
    <compilation defaultLanguage="c#" />
  </system.web>
    <system.webServer>
        <httpErrors errorMode="Custom" existingResponse="Replace">
            <remove statusCode="404" subStatusCode="-1" />
            <error statusCode="404" path="/" responseMode="ExecuteURL" />
        </httpErrors>
        <tracing>
            <traceFailedRequests>
                <add path="*">
                    <traceAreas>
                        <add provider="ASP" areas="" verbosity="Verbose" />
                        <add provider="ASPNET" areas="AppServices,Infrastructure,Module,Page" verbosity="Verbose" />
                        <add provider="ISAPI Extension" areas="" verbosity="Verbose" />
                        <add provider="WWW Server" areas="Authentication,Cache,CGI,Compression,FastCGI,Filter,Module,RequestNotifications,RequestRouting,Rewrite,Security,StaticFile,WebSocket" verbosity="Verbose" />
                    </traceAreas>
                    <failureDefinitions statusCodes="500" />
                </add>
            </traceFailedRequests>
        </tracing>
    </system.webServer>
</configuration>

【讨论】：