Using href directly in Link

Hi, I have a url that is part of the data. I tried using the href value directly instead of params and route but it seems to be doing a full page navigation. Is it expected?

[fridays]

When using only href, it’s not handled by next-routes but passed to the original Link component, which expects a corresponding file in the pages folder (therefore the 404). To use the route defined in routes.js, do it like this:

<Link route='detail' params={{id: 123}}><a>Detail</a></Link>

Alternatively next.js lets you decorate the displayed URL in any way, but you need to tell it which page to render and pass the params. That’s what next-routes normally does for you. You can do it manually like this:

<Link href='/detail?id=123' as='/this-can-be-anything'><a>Detail</a></Link>

Check out the docs here: https://github.com/zeit/next.js#with-link

Hope it helps!

[khankuan]

// routes.js
const nextRoutes = require('next-routes')
const routes = module.exports = nextRoutes()

routes.add('index', '/')
routes.add('detail', '/detail/:id')

// pages/index.js
import { Link } from "../routes";
<div>
   <Link href="/detail/123"><a>Detail</a></Link>
</div>

Without add params and route to Link, it causes a full page reload. Also, the client displays a brief 404 before showing the new page again.

Cheers 😃