Dynamic Routing

[Ehesp]

Hello,

I know this has been discussed in a few other places and also there is a example repo for express, however I'm struggling to get this working with the examples and help on slack:

I need two routes:

• /notifications (pages/notifications/index.js)
• /notifications/:id (pages/notifications/single.js)

My server (express) is setup to like so:

    server.get('/notifications/*', (req, res) => {
      return app.render(req, res, '/notifications/single', req.query);
    });

On the server getInitialProps I can grab the ID from ctx.req.params. However, I'm struggling to navigate to the route using Router.

• The following changes the URL in my browser, but reloads the /notifications route.

Router.push(`/notifications?id=${id}`, `/notifications/${id}`);

• The following hits a 404 page:

Router.push(`/notifications/${id}`);

Is there anyway to handle this?

Cheers

[arunoda]

You server route should be something like this:

server.get('/notifications/:id', (req, res) => {
  const params = { id: req.params.id }
  return app.render(req, res, '/notifications/single', params);
});

And you client side Router.push code should be something like this:

Router.push(`/notifications/single?id=${id}`, `/notifications/${id}`);

[fridays]

Maybe next-routes can be helpful to you, you could use it like this:

routes.add('notification', '/notifications/:id', 'notifications/single')
routes.add('notifications', '/notifications', 'notifications/index')

Router.pushRoute('notification', {id: 1})
Router.pushRoute('notifications')

<Link route="notification" params={{id: 1}}> ... </Link>

[Ehesp]

@arunoda that makes sense cheers :) Works!