Fluxible 和 Navlink 路由错误

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 :

项目详情：{ 路径：'/project/:id/details', 方法：'get'，页码：'ProjectDetail'，标题：'Project detail'，处理程序：要求（'../components/ProjectDetail'）， notInMenu:true }

这是我得到的错误：

/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

看起来你的大小写有误：ProjectDetail vs projectDetail。确保您保持一致。

Answer 2

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

建议 in this comment

I would suggest renaming or duplicating the prop [sic key] name as a possible fix if you really need to access it.

所以将您的代码更改为

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} />;
   });
}

Fluxible 和 Navlink 路由错误

Fluxible and Navlink routing error

javascript

flux

reactjs

fluxible