Dynamic routes are reloading the page even with proper href and as attributes in Link tag

[joshuaia]

Hi all!

I've several pages with the same structure, so as not to keep the same logic for each page, I decided to create dynamic routes in custom server.js file.

Contents of server.js

...
server.get('/:username', (req, res) => app.render(req, res, '/', req.params));
server.get('/author/:authorName', (req, res) => app.render(req, res, '/', req.params));

server.all('*', (req, res) => handle(req, res));
...

As we know from the documentation, for such links we need to add as attribute along with href.
So, I created such link tags:

<Link href="/[username]" as="/marcus">
  <a>Marcus</a>
</Link>
<Link href="/[username]" as="/frederic">
    <a>Frederic</a>
</Link>
<Link href="/[username]" as="/paul">
    <a>Paul</a>
</Link>

But after navigating to one of them, the page is reloading.

Maybe somebody had a problem like that and can help?

[jamesmosier]

You links should use as, not key:

<Link href="/[username]" as="/marcus">
<Link href="/[username]" as="/frederic">
<Link href="/[username]" as="/paul">

[joshuaia]

Sorry, I meant as. There was typo, already fixed.

[jamesmosier]

Could you share more code? I created a new Next app from the custom-server-express example and was able to get the client side navigation to work:

server.js

app.prepare().then(() => {
  const server = express()

  server.get('/:username', (req, res) => {
    return app.render(req, res, '/', req.params)
  })

  server.all('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

pages/index.js

<Link href="/[username]" as="/foo">
  <a>foo</a>
</Link>

pages/[username].js

export default function Username() {
  return <div>username page</div>
}