Next.js: Add a nice way to get the router API inside a component

[arunoda]

We need an HOC API like this:

import { withRouter } from 'next/router'

const Comp = (props) => ({ props.router.asPath })
export default withRouter()(Comp)

[nwshane]

@arunoda Not sure if you want my help, but I would be interested in trying to implement this. Want me to give it a go or do you prefer to do it yourself?

[arunoda]

I've to delay this for a week. Yeah! Go ahead. I'll fine tune it.
Allow us to edit changes when submitting the PR.
This is the place you need to add the router to the context.

[sbekrin]

@nwshane @arunoda sorry for breaking in, but I've been doing same thing with monkey-patching (locally). Just sharing whatever I have.

[nwshane]

@sergeybekrin Thanks, these files are helpful.

@arunoda I've gotten this working already, just a few questions...

1. Should I make a branch off of master containing this change? Or off of v3-beta?
2. Do you think it would be good to add this into the using-router example?
3. I'm trying npm run lint but it causes npm to throw an error. Not really sure what to do about that. Any suggestions?

[arunoda]

@nwshane

• Use the master
• Yes. Use the using-router. But better to change the example that it can be used in the server. Better example would be the showing the active state of a link.
• run npm run lint -- --fix. If still persists, fix the issue

[nwshane]

@arunoda There's the PR. I left the error page so that people know that using 'next/router' directly will break SSR, but I changed the Header to use a CustomLink that is wrapped by withRouter. I took your idea of showing the active state of a link, thanks for that :)

I noticed when implementing this that props.router.asPath is undefined on the server. Can that be fixed to pass down the correct asPath value? Otherwise it still doesn't fix my use case described here, because I need props.router.asPath on server and client.

[arunoda]

@nwshane shall we discuss this on the PR. Could you tell me about the issue there?

[ayazhussein]

Any updates? @arunoda @nwshane Thank you in advance!! :D

[arunoda]

Guys, sorry for not taking this yet.
We are currently in feature freeze due to 3.0 release.
Once we did it we'll take this in ASAP.

[chhuang]

Will this feature be included in 3.0?

[ghost]

Waiting

[i8ramin]

Any updates on this? been dying for a way to add an "active" class to my links

[timneutkens]

@i8ramin it's going to be merged after v3 lands.

[HaNdTriX]

@i8ramin this is the current progress: https://github.com/zeit/next.js/pull/2352

[alexedev]

@timneutkens should it be merged already?

[fritz-c]

This is available in 3.2.0 now.

[timneutkens]

@fritz-c thanks, closed 👌