使React Router与IIS一起使用

时间:2018-06-26 01:48:19

标签: reactjs iis react-router

我一直在寻找一种使我的应用程序与IIS一起使用的方法。我可以正常访问主页,但导航到路线http://10.7.138.131/home/wellchart时会收到403错误。

所以我有一个web.config,看起来像这样:

  <?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" />
                </conditions>
               <action type="Rewrite" url="/" />
             </rule>
           </rules>
         </rewrite>
        </system.webServer>
       </configuration>

我的createBrowserHistory

export const History = createBrowserHistory({
  basename:"/home"
});

最后我的反应路线:

    <Router basename={"/"} history={History}>
          <div>
              <Route path="${process.env.PUBLIC_URL}/wellchart" component={WellChartPage} />
              <Route path="${process.env.PUBLIC_URL}/welldetail" component={WellDetailPage} />   
              <Route path="${process.env.PUBLIC_URL}/tableau" component={TableauPage} />
          </div>
      </Router>

谢谢:)

1 个答案:

答案 0 :(得分:0)

您需要在IIS上重写设置URL。

在React应用程序中,我们有单个入口点index.html。如果您尝试打开其他页面,则IIS将尝试找到该文件,但那里没有任何物理文件,因此IIS将返回404。

URL重写将解决此问题

https://docs.microsoft.com/en-us/iis/extensions/url-rewrite-module/creating-rewrite-rules-for-the-url-rewrite-module

https://www.iis.net/downloads/microsoft/url-rewrite