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 = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var browserHistory = require('react-router');
var createBrowserHistory = require('history/lib/createBrowserHistory');

var CL = require('./page1/1.jsx');
var Validation = require('./page3/3.jsx');
var Infos = require('./page4/4.jsx');
var Confirm = require('./page7/7.jsx');
var Upload = require('./page8/8.jsx');

module.exports = (

  <Router history={new createBrowserHistory()}> 
    <Route path='/' component={CL}></Route>                                                                                                                                     
    <Route path='/validation' component={Validation}></Route>                                                                                                                                     
    <Route path='/infos' component={Infos}></Route>                                                                                                                                     
    <Route path='/confirm' component={Confirm}></Route>                                                                                                                                     
    <Route path='/upload' component={Upload}></Route>                                                                                                                                     
  </Router>
)

Wen run IIS on local, I go to localhost on browser, I can get "CL" component and show on page, however, if I go to /validation, I will get

Failed to load resource: the server respond with status of 404 (Not Found)

Anyone know what need to add to IIS or my js code to make this routing work?

Answer 1

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 2

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 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

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 5

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 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>