Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Routing questions - params patterns like: "/profile/:id/edit" and server db -how to pass data to react components? #418

Closed
YarivGilad opened this issue Dec 17, 2016 · 3 comments

Comments

@YarivGilad
Copy link

hi, I know this issue was discussed before but I wasn't able to find a clear answer to this pattern.
First - correct me if I'm wrong, if you don't implement a custom server (http or express) the Link component supports only query string parameters like "/profile?id=123&action=edit" am I correct?
To be able to work with a url params pattern like "/profile/:id" you need to implement a custom server... this was the best I was able to guess going through the examples...
If so - how would you implement a pattern like "/profile/:id/edit"
In the 'parameterized-routing' example the index.js is using links like this one:
<Link href='/blog?ip=first' as='/blog/first'><a>My first blog post</a></Link>

and I wasn't able to decipher what is the necessary workflow on server.js
server.js declares const match = route('/blog/:id')

and then it is unclear what exactly goes to the address bar, and what is the data that is being pushed to the react component?
How do I handle routes like "/profile/:id/edit"
How do I handle many routes in a generic way (coming from react-router I was looking for the match utility equivalent...)
Also, if I have db data fetching before rendering - how can I pass the fetched data to the react component.
All of these are a bit obscure and I would seriously appreciate your help as I was trying to guess my way through with no success.

Thank you
Ajar

@arunoda
Copy link
Contributor

arunoda commented Dec 17, 2016

This is a set of good questions.
We'll add more info on the docs.

For now, think like this:

  • Next.js only knows how to serve pages. You should pass via params. (Like: /blog?id=first)
  • With Programmatic API #310 we allow a way to customize how it looks to the outside world. (Like: blog/:id See
  • And when you are doing client side routing, client side app don't know anything about custom urls.
  • So, you need use Link as: <Link href='/blog?id=first' as='/blog/first' />
    • href: this is the actual url of the page
    • as: this is how it should looks like in the browser (typically, it should match with your custom URL pattern)

@YarivGilad
Copy link
Author

Thank you @arunoda !
Simple & clear.

@arunoda
Copy link
Contributor

arunoda commented Dec 18, 2016

Awesome. gonna close this issue.

@arunoda arunoda closed this as completed Dec 18, 2016
@lock lock bot locked as resolved and limited conversation to collaborators May 12, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants