Fluxible and Navlink routing error

Question

I m actually developping an application using fluxible and I m facing a problem using route parameters.

Actually, I m having this render function :

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

And this route in my ./conf/routes.js :

ProjectDetail: { path: '/project/:id/details', method: 'get', page: 'ProjectDetail', title: 'Project detail', handler: require('../components/ProjectDetail'), notInMenu:true }

And here's the error that I get :

/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'

It happens only when I try to use parametered routes in routes.js.

I dont have any idea of making it differently :-/

Answer 1

according to https://github.com/facebook/react/issues/2429 you cannot reference this.key or this.props.key from a component.

The recommendation in this comment is to

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

so change your code to something like

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

and in the parent rendering component, do:

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