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.

what do AnyPic and PhotoView look like? Are there any errors in the console? — max
– max, Commented Nov 14, 2015 at 15:16

knowbody · Accepted Answer · 2015-11-16 00:40:46Z

7

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.

answered Nov 16, 2015 at 0:40

knowbody

8,2966 gold badges48 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React router not rendering component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related