javascript - React Router 所需上下文 `router` 未在 `Link` 中指定

Question

我正在尝试让路由正常工作。任何帮助将不胜感激。我已经和这个斗争太久了:(

由于以下错误，Blog.js 无法呈现。

这是错误:

警告:上下文类型失败:Link 中未指定所需的上下文 router。检查 BlogList 的渲染方法。 bundle.js:26589 警告:基于所有者和基于父级的上下文不同(值:undefined 与 `function (props, context) { //此构造函数被模拟覆盖。使用参数

我期望发生什么:

当博客页面(Blog.js)呈现时，它将有一个文章列表。当用户单击文章时，他们将被定向到: http://site/blog/articleId (BlogView.js)

代码:

Main.js

Router.run(routes, Router.HistoryLocation,function (Handler) {
    React.render(<Handler />, document.getElementById('startApp'));
});

App.js

 var App = React.createClass({
    render : function () {
        return (
            <div>
                <Header />
                <RouteHandler />
            </div>
        )
    }
});

module.exports = App;

路由器:

<Route name="app" path="/" handler={App}>
    <DefaultRoute handler={Home}/>
    <Route name="home" path="/home" handler={Home}/>
    <Route name="blog" path="/blog" handler={Blog}/>
    <Route name="blogView" path="/blog/:id" handler={BV}/>
    <Route name="about" path="/about" handler={About}/>
</Route>

组件: 博客.js:

render: function () {

    return (

        <div className="container-fluid">
            <BlogList blogEntries = {this.state.blogEntries} rawMarkup={this.state.rawMarkup}/>
        </div>
    )
}

BlogList.js: 返回(

        <div className="container-fluid" style={{
                paddingTop: '10px'
        }}>

            <div style={{
                paddingLeft: '100px',
                paddingRight : '100px'
            }}>
                <div style={{
                backgroundColor : 'white',
                boxShadow: '10px 10px 5px #888888',
                border: '2px solid black'
              }}>
                    <Link to="blogView" className="text-center">test </Link>

                    <div className="text-center">
                    </div>
                </div>
            </div>
        </div>
    )

Answer 1

index.html 中父级“div”的 id 是什么？

应该是

  <div id="startApp">
  </div>

但是，如果您遵循Corey House“Building Applications with React and Flux”的类(class)，我相信index.html中的父div应该是

<div id="app">
</div>

如果是这种情况，那么您的 Main.js 应该是

Router.run(routes, Router.HistoryLocation, function(Handler) {
  React.render(<Handler/>, document.getElementById('app'));
});

注意“app”而不是“startApp”。