We are using react-router like so:

ReactDOM.render(
    <Router>
        <Route path="/" ponent={AnyPic}>
            <Route path="p/:photoId" ponent={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.

We are using react-router like so:

ReactDOM.render(
    <Router>
        <Route path="/" ponent={AnyPic}>
            <Route path="p/:photoId" ponent={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.

• javascript
• reactjs
• react-router

• "What is that ?_k=ckuvup junk in the URL?" – robertklep Commented Nov 14, 2015 at 8:45
• what do AnyPic and PhotoView look like? Are there any errors in the console? – max Commented Nov 14, 2015 at 15:16
• @max updated to include other ponents – Carpetfizz Commented Nov 15, 2015 at 20:09

1 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 ponent 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 ment, 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.