How to use react router (createBrowserHistory) on Microsoft IIS to make routing working?

Question

I am using react-router (createBrowserHistory) for my react app.

Below is my code of

var ReactDOM = require(\'react-dom\') ;

var ReactRouter = req         


        

Answer 1

I've struggled with this a little bit so I write it for the next person: First update the web.config file (as Bo Chen mentioned).

 <system.webServer>
    <rewrite>
      <rules>
        <rule name="Rewrite Text Requests" 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>

This will find every request and rewrite it to /index.html instead.

So you need to have a index.html in the root of your project. Also pay attention to the extension of the file.

Answer 2

I think you are talking about react-router or similar stuff below configuration on iis 7 works for me

<rules>
     <rule name="Rewrite Text Requests" 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>

Answer 3

One additional thing to note: make sure you have the URL Rewrite extension installed.

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

You may also need to do an iisreset after installation.

Answer 4

Another option is using an application on top of IIS to ensure you've got other features that might come in handy, like the ASP.NET framework with MVC on top of it. You could have a route there that simply catches all requests that aren't specifically mapped (like /api, /content) and route these to the html in such a way that your React app can handle it. The benefits over pure IIS really depend on your circumstance.

The following is my route configuration for ASP.NET Core, to give you an example:

app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller}/{action}/{id?}",
                defaults: new {controller = "Home", action = "Index"},
                constraints: new { controller = new NotEqualConstraint("api")});

            routes.MapRoute("api", "api/{controller}/{action}/{id?}");
            routes.MapRoute("React failover", "app/{*uri}", new {controller = "App", action = "Index"},
                new {controller = new NotEqualConstraint("api")});

        });

Answer 5

There are two things you can do...

1. Add virtual paths to point to your spa folder for every route.
2. Use IIS URL rewrite module. This is a long discussion to your using the SO app, so here's a post describing it- http://weblogs.asp.net/owscott/rewrite-vs-redirect-what-s-the-difference

Answer 6

Here is a working web.config file

<?xml version="1.0"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
     <rule name="Rewrite Text Requests" 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>
  </system.webServer>
</configuration>