The router does not process the component.

Question

I am developing my project with react-router.

below is my code.

const App2 = React.createClass({
    render() {
        return (
            <div>
                <Link to="index">index</Link>
                <Link to="favorite">favorite</Link>
                <Link to="myPage">myPage</Link>
                {this.props.children}
            </div>
        )
    }
});

var app = ReactDOM.render (
    <Router history={browserHistory}>
        <Route path="/" component={App2}>
            <Route path="index" component={PhotoFeedWrapper}/>
            <Route path="favorite" component={FavoriteWrapper}/>
            <Route path="myPage" component={MyPageWrapper}/>
        </Route>
    </Router>,
    document.getElementById('app')
);

I think my code is right. but, do it empty as shown below.

<div id="app"><!-- react-empty: 1 --></div>

no script error.

What have I done wrong?

Answer 1

Currently component

Linkonly supports the absolute path. You must change to:

<Link to="/index">index</Link>
<Link to="/favorite">favorite</Link>
<Link to="/myPage">myPage</Link>