CODEWITHSUNDEEP
iisreactjsreact-router
user3162979
user3162979

Reputation: 935

react-router - im getting 404 after adding route

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'));

Upvotes: 2

Views: 7191

Answers (2)

deadlydog
deadlydog

Reputation: 24394

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>

Upvotes: 1

Davin Tryon
Davin Tryon

Reputation: 67296

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.

Upvotes: 1

Related Questions