Respond not to router rendering component

Question

We use react-router as follows:

 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 enabling react-router , what used to be just localhost:8000 began to look like localhost:8000/#/?_k=wulhmi . Not sure where these extra options come from.

In any case, when trying to access localhost:8000/#/p/XYZ page continues to return to / . Any help would be greatly appreciated.

Answer 1

The reason for this is that you are not passing your route (s) to your children. Mark the router response documents .

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 noted in a comment, a “redundant” thing is added to the URL, since Router uses hash history by default, you probably want to use BrowserHistory to do this, you need to install the history module : npm install history See Docs here .