CODEWITHSUNDEEP
reactjs
Penny
Penny

Reputation: 167

React Routing 404 error on IIS when you hit refresh

I did not find a solution for this issue yet I have tried various solutions but nothing works. I have a react JS app which when deployed on the test server and you hit refresh on a page I get 404 error message. I have tried URL rewrite and this helped in navigating back to homepage but this does not resolve the refresh issue. Pls help.

Upvotes: 10

Views: 22313

Answers (8)

Moumit
Moumit

Reputation: 9530

If react project in separate folder other than root, add a web.config inside that folder and put this xml inside, ctrl+F5 will also work to stay on same route

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>         
      <rewrite>
           <rules>
                <rule name="DynamicContent">
                     <conditions>
                          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
                     </conditions>
                     <action type="Rewrite" url="index.html"/>
                </rule>
           </rules>
      </rewrite>
   </system.webServer>
 </configuration>

Upvotes: 0

Mohammad Zandieh
Mohammad Zandieh

Reputation: 1

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpErrors errorMode="Custom" existingResponse="Replace">
            <remove statusCode="404" subStatusCode="-1" />
            <error statusCode="404" path="/" responseMode="ExecuteURL" />
        </httpErrors>
         <directoryBrowse enabled="true" />
         <httpProtocol>
      <customHeaders>
        <clear />         
      </customHeaders>
    </httpProtocol>
    </system.webServer>
</configuration>
  1. Create file web.config
  2. Copy this config into your web.config
  3. Now put your file in build place

Upvotes: 0

Julio Schurt
Julio Schurt

Reputation: 2104

My application is hosted on IIS 10. I tried making changes for URL Rewrite, but instead of receiving the 404 error, I started getting the 500 error (couldn't identify the cause).

So, I decided to use another solution. I edited the web.config file as shown below. This way, instead of returning the 404 error, the application will be redirected to the root of the application (similar to what we would do with URL Rewrite), and React Router will take care of the rest.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
        <mimeMap fileExtension=".webp" mimeType="image/webp" />
    </staticContent>
     <httpErrors errorMode="Custom" existingResponse="Replace">
        <remove statusCode="404" subStatusCode="-1" />
        <error statusCode="404" path="/" responseMode="ExecuteURL" />
    </httpErrors>
  </system.webServer>
</configuration>

Upvotes: 0

Suresh Kamrushi
Suresh Kamrushi

Reputation: 16086

If you are deploying first time make sure your have installed "URL Rewrite" and enabled it.

You can download extension from below link:

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

and then create a web.config file and add below lines:

<?xml version="1.0"?>
<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" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Please restart the IIS and check the application it should work.

Upvotes: 8

Ranga
Ranga

Reputation: 1391

We can create a web.config file in project's root to fix this as well.

web.config file content

<?xml version="1.0"?>
<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" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Upvotes: 24

M Fuat
M Fuat

Reputation: 1440

For whom who are using Nextjs, the must use withRouter like the following:

import React, { Component } from "react";
import { withRouter } from 'next/router'

class Login extends Component {


    constructor(props) {
        super(props);
    }


    onClickHandler = (event) => {
        this.props.router.push('/newPage')

    }

    render() {
        return (

            <div>
                <p>Hello, {this.props.router.pathname}</p>
                <button onClick={this.onClickHandler}>Click me!</button>
            </div>
        );
    }
}

export default withRouter(Login);

Upvotes: 0

Penny
Penny

Reputation: 167

This worked for me:

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

I also ensured the path in my application's <Route> had the correct test server path, and this fixed it!

<Route path="/has/the/correct/testserver/path" component={testcomponent} />

Upvotes: 6

Cheezy Code
Cheezy Code

Reputation: 1715

You need to add rules in your rewrite config. So that your base page is returned for every url in your react application.

<rule name="PageRefresh" stopProcessing="true">
    <match url=".*" ignoreCase="false" />
    <conditions logicalGrouping="MatchAll" trackAllCaptures="false">                        
        <add input="{URL}" pattern="/build(.*)" negate="true" />
        <add input="{URL}" pattern="/script(.*)" negate="true" />       
        <add input="{HTTP_HOST}" pattern="(YOUR_DOMAIN).com" />
    </conditions>
    <action type="Rewrite" url="/{C:1}/{C:1}.html" />
</rule>

Upvotes: 2

Related Questions