Question

我实际上正在使用fluxible开发一个应用程序，我正在使用路由参数来解决问题。

实际上，我有这个渲染功能：

render() {
        return (
          <div className="card small hoverable">
              <div className="card-image">
                <img src="http://www.gizmobolt.com/wp-content/uploads/2014/11/14-77.jpg"/>
                <span className="card-title">{this.props.title}</span>
              </div>
              <div className="card-content">
                <p>I am a very simple card. I am good at containing small bits of information.
                I am convenient because I require little markup to use effectively.</p>
              </div>
              <div className="card-action">
                <NavLink routeName="ProjectDetail" navParams={{id: this.props.key}}>Manage</NavLink>
              </div>
          </div>
        );
    }

这条路线在我的./conf/routes.js中：

ProjectDetail：{ 路径：＆＃39; / project /：id / details＆＃39;，方法：＆＃39;得到＆＃39;，页面：＆＃39; ProjectDetail＆＃39;，标题：＆＃39;项目详情＆＃39;， handler：require（＆＃39; ../ components / ProjectDetail＆＃39;）， notInMenu：真 }

这是我得到的错误：

/soft/blog/node_modules/fluxible-router/lib/createNavLinkComponent.js:94
                throw new Error('NavLink created without href or unresolvable 
                      ^
Error: NavLink created without href or unresolvable routeName 'ProjectDetail'

只有在我尝试在routes.js中使用参数化路由时才会发生。

我不知道如何区别对待： - /

Answer 1

根据https://github.com/facebook/react/issues/2429，您无法从组件中引用this.key或this.props.key。

建议in this comment是

如果您确实需要访问它，我建议将prop [sic key]名称重命名或复制为可能的修复。

所以将代码更改为

render() {
    return (
      <div className="card small hoverable">
          <div className="card-image">
            <img src="http://www.gizmobolt.com/wp-content/uploads/2014/11/14-77.jpg"/>
            <span className="card-title">{this.props.title}</span>
          </div>
          <div className="card-content">
            <p>I am a very simple card. I am good at containing small bits of information.
            I am convenient because I require little markup to use effectively.</p>
          </div>
          <div className="card-action">
            <NavLink routeName="ProjectDetail" navParams={{id: this.props.id}}>Manage</NavLink>
          </div>
      </div>
    );
}

并在父渲染组件中执行：

render() {
  {this.states.cards.map(function eachCard(card) {
      return <CardItem key={card.id} id={card.id} />;
   });
}

Answer 2

看起来你的套管有误：ProjectDetail vs projectDetail。确保你保持一致。

Fluxible和Navlink路由错误

2 个答案: