Next-routes: Using href directly in Link

[khankuan]

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]

Hey, I can't reproduce. It should not do a full page navigation. Can you show some example code?

[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 :)

[khankuan]

I'm also curious if full urls are supported. For example, I might display an anchor tag on my application that contains the full url to a page on my site. Can i use that directly with Link and avoid a full page reload? Since I've got the full url, it would be harder to determine the route and params.

[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]

Thanks for the detailed walk-through! I now understand better. However, I have a use case where a component would render a url link that goes to anywhere including external sites.

Example:
http://mysite.com/detail/123
http://google.com

Im wondering if I can supply the url value directly in the link component, be it with next routes or without. For the first case, I want to be able to navigate without a reload. In the second case, the site would navigate out externally.

Cheers :)

[Rukeith]

@fridays
As your sample <Link href='/detail?id=123' as='/this-can-be-anything'><a>Detail</a></Link>
How could I get query id=123 at server ?
I found I use req.url will get value of as this-can-be-anything.

[rajendraarora16]

@Rukeith You can get the query by writing a piece of code in your pages:

static async getInitialProps({ query }) {
const _param = query && query.id;
// Here _param is your id by hitting the URL /detail/123
}