Add active class to link

[timneutkens]

Fixes #141

Adds active class to a <Link> component if the current route matches the href property.
Since we clone the <a> inside of the <Link> component it can be scope-styled using styled-jsx without any modifications.

import Link from 'next/link'
export default () => (
  <div>
    Hello World.
    <Link href='/about'><a>About</a></Link>
    <Link href='/'><a>Home</a></Link>
    <style jsx>{`
      a.active {
        color: red;
      }
    `}</style>
  </div>
)

[sedubois]

Looks great! I don't know much about this, but will it also work if URL parameters are in a different order?

[arunoda]

This is not how we want to do this.
We need to expose our next/router API to be accessible on everywhere.

With a utility like:

import { withRouter } from 'next/router'

[timneutkens]

@arunoda I like that solution way more 👌 Thaaaaaanks 😉

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.