Closed khankuan closed 7 years ago
Hey, I can't reproduce. It should not do a full page navigation. Can you show some example code?
// 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 :)
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
.
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!
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 :)
@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
.
@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
}
Hi, I have a url that is part of the data. I tried using the href value directly instead of
params
androute
but it seems to be doing a full page navigation. Is it expected?