react-router 2.0 doesn't route

Question

I have this simple code that doesn't work. I took it from the react-router project page and modified slightly for it to look a bit better.

Setup

I have several very simple react components:

var IndexPage = React.createClass({
    render(){
        return (<h1>Index Page</h1>);
    }
});
var AboutPage = React.createClass({
    render(){
        return (<h1>About page</h1>);
    }
});
var NotFoundPage = React.createClass({
    render(){
        return (<h1>Not found page</h1>);
    }
});

Also I have made a setup of react router:

var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var BrowserHistory = ReactRouter.browserHistory;
var Render = ReactDOM.render;

And that's how I use react router 2.0.

Render((
  <Router history={BrowserHistory}>
    <Route path="/" component={IndexPage}>
      <Route path="about" component={AboutPage}/>
      <Route path="*" component={NotFoundPage}/>
    </Route>
  </Router>
), document.body)

I use BrowserHistory (not HashHistory) to avoid hash in urls.

My server is raised under IIS 10 (Windows 10) on 8080 port.

Problem

http://localhost:8080/

goes to IndexPage component. This is correct.

http://localhost:8080/about

goes to IIS 404 error page. Routing doesn't work in this case

http://localhost:8080/ttt

goes to IIS 404 error page again.

So the router doesn't see this nested paths that go after /. And it doesn't even care about whether they are correct or not.

What can cause such a strange behavior?

Thanks in advance!

Update

I've found out that the next string solves the problem with a client routing:

{this.props.children}

This is the fixed code:

var IndexPage = React.createClass({
    render(){

        console.log('index page render');

        return (<div>
                    <h1>Index Page</h1>
                    <Link to={ '/about' }>about</Link>
                    {this.props.children}
                </div>);
    }
});

And i mentioned that I disabled hashes by using BrowserHistory instead of HashHistory — yurart
I have the same setup, both server-wise and using {this.props.children}, but I get the IIS 404 instead of my custom 404. Works when running on webpack-dev-server. — Nicklas Pouey-Winger
I don't use backend yet because it is not so important at the moment. I use client routing. I can send you a fully working very simple example if you want. — yurart

larrydahooster larrydahooster · Accepted Answer · 2016-02-14T11:32:43

Is your server configured to map all application-paths to your index.html? You should never get a IIS 404 if your server would map all path to your index file, as it always would deliver this one.

react-router 2.0 doesn't route

3 Answers