NavLink making request for the wrong URL

[talyssonoc]

I'm trying to create a NavLink for a given route, and it is generating the right URL (I'm using routeName and navParams), but it is making the request for the wrong URL (if I log req.url at my server.js I get the wrong URL).

It gets weirder when, if I make the direct request to another page (typing it in the browser) and navigate to the page where the link works wrong, the link start to work properly.

I created a repository with the code (here: https://github.com/talyssonoc/flux-tracker). If you go to / and try to use the links, they work wrong, but if you go to /projects/0, click the Back link and then try to use the links, they work properly. I guess it is a bug with NavLink, say me if I posted the issue in the wrong repository !

Thanks.

[redonkulus]

@talyssonoc I looked at this locally and the reason NavLink is failing is because of a fatal error from one of your components: Uncaught TypeError: Cannot read property 'map' of undefined

This is coming from https://github.com/talyssonoc/flux-tracker/blob/master/components/project/Project.js#L5, where this.props.stories is undefined. It works going from the projects page to index because you are not hitting that code path I assume.

[talyssonoc]

@redonkulus Yes, I saw it, and that's why I think the bug is on NavLink. When accessing /phoject/:id, this action should run https://github.com/talyssonoc/flux-tracker/blob/master/controllers/projects/show.js, but for some reason it is hitting this action https://github.com/talyssonoc/flux-tracker/blob/master/controllers/projects/index.js, that should run only when accessing the root (look: https://github.com/talyssonoc/flux-tracker/blob/master/configs/routes.js).

I've put a console.log at each of this actions so it will show me when they're called. When I access index it logs Index as expected, but when I click on the link it logs Index again, but it should log Show. But when I access a project page directly it logs Show normally, and if I click on the Back link and then click on some project link again, it logs Show again as expected.

The bug happens because the NavLink is making a request for / when it should be making a request to /project/:id so it will trigger the show action and fill this.props.stories.

[redonkulus]

So basically what is happening is that the when link is clicked, fluxible-router is executing the handler for that route, in this case projects/show. But since the component assumes this.props.stories to be present it fails. If you make the component a little more defensive and check that the stories exists first, then it works fine.

I modified the components/projects/Show.js to be more defensive:

    if (this.props.project) {
      return (
        <div>
          <NavLink routeName='projects'>
            Back
          </NavLink>
          <Project {...this.props.project}/>
        </div>
      );
    } else {
      return;
    }

Then the component will not fail when the handle is called and once the action is complete and the Project store is updated, the component will re-render and show the data.

This is useful as it lets you create a loading message or something for users in your component before the data is available.

[talyssonoc]

Oooh, I see, I didn't knew that it could happen, thanks !