react-router - im getting 404 after adding route

Question

In my aspx webform page (test.aspx), i have a tab, where i want to execute the react component(second component) on click. At the moment, I'm getting a 404, when going to /SysAdmin/HelpPageManagement

Code

test.aspx

<Link to="/SysAdmin/HelpPageManagement" href="#">Help Pages</Link>

main.js

var React = require("react");
var ReactDom = require("react-dom");
var firstComponent = require("../Components/helpPage_Management_Component");
import {Router, Route, browserHistory } from 'react-router';

var secondComponent = React.createClass({
 render() {
     return ( <h1>Help Page </h1> );
  }
});

const router = (
  <Router history={browserHistory}>
    <Route path="/SysAdmin/HelpPageManagement" component={secondComponent}      />
 <Route path="/systemmaintenance.aspx" component={firstComponent} />

 </Router>
 )
 ReactDom.render(router, document.getElementById('helpPage'));

score 1 · Answer 1 · answered Aug 24 '16 at 08:44

1

This is because defining a route in React Router is a client-side route. If you request the url directly your server needs to understand that the client is going to handle the route.

The 404 is generated by the server because this is usually the default route behaviour.

Instead, configure your server so that the default is to send back the main html page with the client routes. Then, React Router will handle it on the client side based on the url.

answered Aug 24 '16 at 08:44

Davin Tryon

66,517
15
143
132

2

I'm stuck on how to do this. I'm using url rewrite with iis. – user3162979 Aug 24 '16 at 15:12
2

Check out: http://stackoverflow.com/questions/35533291/how-to-use-react-router-createbrowserhisroty-on-microsoft-iis-to-make-routing – Davin Tryon Aug 24 '16 at 15:19

score 0 · Answer 2 · answered Feb 27 '23 at 03:55

I ran into the same issue and Davin Tryon's comment on the other answer led me to the solution on this other SO question.

Adding a web.config file to my site with the following configuration worked for me, to send all routes back to the index.html file:

<?xml version="1.0" encoding="utf-8"?>
<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>

react-router - im getting 404 after adding route

2 Answers2