React Router无法渲染组件。

Question

我使用 react-router 开发我的项目。

以下是我的代码。

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')
);

我认为我的代码是正确的。但是，渲染出来的结果就像下面这样是空的。

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

没有脚本错误。

我做错了什么？

- Hyeonil Jeong

---

你是如何访问它的？使用 http://localhost/index 吗？另外，你能否发布你的其他组件以查看它们是否正确？ - William Martins

@WilliamMartins 不是的，我是通过 http://localhost:8080/contextPath/index 访问它的。我没有在 node 上使用它，而是在 spring 和 UMD 构建中使用它。所以我就这样使用。其他组件是正确的。 - Hyeonil Jeong

很奇怪，你的链接被渲染了吗？ - William Martins

@WilliamMartins 谢谢你的帮助。我之前不知道URI必须匹配。 - Hyeonil Jeong

哦，有帮助吗？:D - William Martins

Answer 1

Link 组件目前仅支持绝对路径。您需要更改为:

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

- xiaofan2406

---

我看到了你的“Link”设置，然后立即发布了这个。然后我意识到这并没有回答你最初的问题。但它确实修复了你代码中的另一个错误。 :P - xiaofan2406