Link params not working

[bdombro]

I have tried the following combos:

With href: works, but reloads the whole page and says 404 for 3 seconds. <Link href={'/blog/'+post.id}><a>{post.title}</a></Link>

With params: The href looks good, but clicking the link throw an error (see below). <Link route='blog/entry' params={{id: post.id}}><a>{post.title}</a></Link>

With to: The href looks good, but clicking the link throw an error (see below). <Link to={'/blog/'+post.id}><a>{post.title}</a></Link>

Error:

TypeError: Cannot read property 'id' of undefined
    at Post (http://localhost:3000/_next/1509617163196/page/blog/entry:43023:55)
    at mountIndeterminateComponent (http://localhost:3000/_next/1509617163196/commons.js:10406:15)
    at beginWork (http://localhost:3000/_next/1509617163196/commons.js:10607:16)
    at performUnitOfWork (http://localhost:3000/_next/1509617163196/commons.js:12579:16)
    at workLoop (http://localhost:3000/_next/1509617163196/commons.js:12688:28)
    at HTMLUnknownElement.callCallback (http://localhost:3000/_next/1509617163196/commons.js:1305:14)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/_next/1509617163196/commons.js:1344:16)
    at invokeGuardedCallback (http://localhost:3000/_next/1509617163196/commons.js:1201:27)
    at performWork (http://localhost:3000/_next/1509617163196/commons.js:12806:7)
    at scheduleUpdateImpl (http://localhost:3000/_next/1509617163196/commons.js:13191:19)

The Link is in components/PostList.js.

Src:

• Branch with href: https://github.com/benevolenttech/apollo-cms
• Branch with params: https://github.com/benevolenttech/apollo-cms/tree/link-params-test2
• Branch with to: https://github.com/benevolenttech/apollo-cms/tree/link-params-test3

[atuttle]

Try prepending slashes to your routes. Mine works fine:

routes.js:

const routes = (module.exports = require('next-routes')());

routes
    .add('security-users', '/admin/security/users', '/admin/security/users')
    .add('security-edit-user', '/admin/security/users/:userId', '/admin/security/edit-user');

Page:

<Link route="security-edit-user" params={{ userId: user.userId }}>
    <a>{user.emailAddress}</a>
</Link>

[bdombro]

@atuttle thanks for reviewing. Unfortunately, the same syntax is not working for me. It can be reproduced by running my app. When clicking the link, it throws an error that "ID not found". But then if I refresh the page, it works. https://github.com/benevolenttech/apollo-cms/tree/link-params-test2b

const routes = module.exports = require('next-routes')()
routes
  .add('blogEntry', '/blog/:id', 'blog/entry')

<Link route='blogEntry' params={{id: post.id}}><a>{post.title}</a></Link>

Video: http://cloudfront.benevolent.tech/benevolent.tech/stackoverflow/screencast+2017-11-06+22-38-412.mp4

Demo: https://apollocms-eonozunenu.now.sh

[atuttle]

Try prepending slashes to the 3rd argument of routes.add():

routes.add('blogEntry', '/blog/:id', '/blog/entry')

[bdombro]

Thanks for the reply! I tried that now and it still has the same behavior.

[bdombro]

Are you able to reproduce it with my src code?

[fridays]

Hi @bdombro the error message indicates that the post object is undefined, can you debug this?

[bdombro]

Ya it says that, but if I refresh the page it's fine. So the problem is with the Link feature of the router, not the route itself. Knaw mean?

[mergebandit]

What is the expected behavior if I pass null as one of the values, e.g.

routes.add('hawtness', '/hawtness/:foo')
...
<Link route="hawtness" params={{ foo: null }}><a>The Hawtness</a></Link>

If I inspect the query object, I see "null" being passed as a string, as it's being URI encoded. I would expect this param to simply not be passed.

[mergebandit]

FWIW, submitted a PR for null param values (not sure this solves the OPs issue, but is tangentially related)

[fridays]

Hi @bdombro please try to move asynchronous data fetching into getInitialProps, so Next.js will wait with the rendering until all required data (like post object) is available. That should be here in your code: https://github.com/benevolenttech/apollo-cms/blob/link-params-test2b/pages/blog/entry.js#L12