react-router Router.HistoryLocation leaves target with

Question

I have just left the starting blocks with ReactJs and discovered the react-router. Awesome stuff but i cannot see to get the following code to work with the "Router.HistoryLocation" as the 2nd param to the run function.

It all works perfectly without however uses a # in the url. This Q got me to Router.HistoryLocation as the 2nd param, so do the github docs. But when ever i run this in the browser the result is the target filled with nothing more that this:

<noscript data-reactid=".0"></noscript>

Here is the code running on jsbin: http://jsbin.com/saxutulaxi/1/. If you edit the code and remove the "Router.HistoryLocation" from the last bit it all works but with it does not.

Here is the simple script i am running. // This is straight from the overview.md in the react-router docs var Router = ReactRouter; var DefaultRoute = Router.DefaultRoute; var Link = Router.Link; var Route = Router.Route; var RouteHandler = Router.RouteHandler;

var App = React.createClass({
    render: function () {
        return (
        <div>
            <header>
                <ul>
                    <li><Link to="inbox">Inbox</Link></li>
                    <li><Link to="calendar">Calendar</Link></li>
                </ul>
            </header>

            {/* this is the important part */}
            <RouteHandler/>
        </div>
        );
    }
});

var Inbox = React.createClass({
    render: function () {
        return (
            <div>
                This is the inbox
            </div>
        );
    }
});

var Calendar = React.createClass({
    render: function(){
        return (
            <div>
                This is the calendar
            </div>
        );
    }
});

var routes = (
    <Route name="app" path="/" handler={App}>
        <Route name="inbox" handler={Inbox}/>
        <Route name="calendar" handler={Calendar}/>
        <DefaultRoute handler={Inbox}/>
    </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {
    React.render(
        <Handler/>,
        document.querySelector('#content')
    );
});

Not sure what else to do except ask on here as i think i have followed the guides to the letter...

Thanks, John

Answer 1

Your code is correct, however it won't work on JSBin due to the app being run in an iframe where the url is not what react-router is expecting. In JSBin's case the iframe reports a HistoryLocation of /runner.

<Route name="app" path="/runner" handler={App} > fixes your issue on JSBin.