Add child function support to Link

[jkhoffman]

In my project, I'm using React Bootstrap for style/UI components. In my header, I use the NavItem component. But, that component is not aware of the Next.js router, which results in a server roundtrip for every click.

To fix this, I borrowed a concept from React Router and added support for child functions to Link. Here is how I use it in my project:

<Link href='/'>{ ({href, onClick}) =>
  <NavItem eventKey={1} href={href} onClick={onClick}>Index</NavItem>
}</Link>

This allows me to inject the onClick from my router-aware Link to my non-router-aware NavItem.

Hope it's helpful.

[arunoda]

Thanks for the PR.
We wanted to make the built in Link API pretty simple as possible we can.
I think this is something you could do in the user land and release independently to NPM.

Anyway, I didn't understand the real problem behind here. Could you send us a sample repo with the original issue?

[rauchg]

Have you also looked into the imperative routing API?

[jkhoffman]

Here is the simplest sample repo I could cook up with the original issue.

I'm just trying to use React-Bootstrap's Navbar component, and it does not play nice with Next.js out of the box.

I had a similar problem with React Router, but was able to work around it by using a child function. That's why I thought it'd be handy to add to Next.js.

If there is a better way to achieve my simple goal, ignore my pull request.

[jkhoffman]

@rauchg Thanks for pointing me to imperative routing API. This code works:

<NavItem eventKey={1} onClick={() => Router.push('/')}>Index</NavItem>
<NavItem eventKey={2} onClick={() => Router.push('/secret')}>Secret</NavItem>

[rauchg]

Awesome @jkhoffman. We strive to keep parity between "manual" imperative APIs and their declarative JSX shorthand.

[Soundvessel]

I think I found a solution that allows the use of react-bootstrap components with NextJS. I use <Link/> from next-routes but I believe this should also work with next-router.

First create a component for passing the props around <Link/>:

import React from 'react'
import { Link } from '../routes'

// passes props from react-strap around <Link> to <a> to prevent errors :)
const NextLink = ({ children, href, passHref, ...rest }) => (
  <Link href={ href } passHref={ passHref }><a {...rest}>{ children }</a></Link>
)

export default NextLink

Then in your navbar use <NavItem componentClass={ NextLink } href="/yourpath">