Question

我试图让路由工作。任何帮助将不胜感激。我已经和这个人打了太长时间了:(

由于下面的错误，

Blog.js无法呈现。

这是错误：

警告：上下文类型失败：router中未指定必需的上下文Link。检查BlogList的呈现方法。 bundle.js：26589警告：基于所有者和基于父的上下文不同（值：undefined vs`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>

组件： Blog.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

您父母的身份是什么＆＃34; div＆＃34;在index.html？

应该是

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

但是如果你按照Corey House＆＃34; Building Applications with React and Flux＆＃34;的课程，我相信index.html中的父div应该是

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

如果是这样，那么你的Main.js应该是

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

注意＆＃39; app＆＃39;而不是＆＃39; startApp＆＃39;。

React Router在`Link`中没有指定上下文`router`

1 个答案: