javascript - React router not rendering component - Stack Overflow

admin管理员组

文章数量:1308500

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

Share Improve this question Follow edited Nov 15, 2015 at 20:09 Carpetfizz asked Nov 14, 2015 at 3:28 CarpetfizzCarpetfizz 9,1892323 gold badges9595 silver badges155155 bronze badges 3

• "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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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 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.

本文标签： javascriptReact router not rendering componentStack Overflow