React router not rendering component

Question

We are using react-router like so:

ReactDOM.render(
    <Router>
        <Route path="/" component={AnyPic}>
            <Route path="p/:photoId" component={PhotoView} />
        </Route>
    </Router>,
    document.getElementsByClassName("container")[0] 
);

var AnyPic = React.createClass({
    render: function() {
        return (
            <p>Hello world</p>
        )
    }
});

var PhotoView = React.createClass({
    render: function(){
        return (
            <p>This is the photo view</p>
        )
    }
});

After including react-router, what used to be just localhost:8000 started looking like localhost:8000/#/?_k=wulhmi. Not sure where those extra params came from.

Anyway, when trying to access localhost:8000/#/p/XYZ the page keeps going back to /. Any help would be much appreciated.

Answer 1

The reason for that is because you are not rendering your children route(s). Check out the react router docs.

If you add this.props.children to your AnyPic component everything will work:

var AnyPic = React.createClass({
    render: function() {
        return (
            <div>
                <p>Hello world</p>
                {this.props.children}
            </div>
        )
    }
});

As @robertklep pointed out in the comment, the "extra" thing in the URL is being added as The Router uses Hash History by default, you probably want to use BrowserHistory to do that you need to install history module: npm install history See the docs here.