React Router about rebass HOT 4 CLOSED

Since I have hit this problem a couple of times now because it's a been a while between projects... and this page seems the top hit in google when I search for it...

Component doesn't work, you need to use "is" ( I think there is another issue explaining this, but can't find it at the moment )

<NavItem
      to='/'
      is={Link}
      children='Home' />

from rebass.

Because googling and still get top for this issue, use as instead of is

import { Link as RouterLink } from 'react-router'
import { Link as RebassLink } from 'rebass'

export default props =>
  <RebassLink
    {...props}
    as={RouterLink}
  />

#468
#539
https://www.styled-components.com/docs/api#as-polymorphic-prop

from rebass.

No worries. I haven't documented that very well yet. The basic way is something like this:

import { NavItem } from 'rebass'
import { Link } from 'react-router'

const MyComponent = () => (
  <div>
    <NavItem
      to='/'
      Component={Link}
      children='Home' />
  </div>
)

I haven't written any tests for this specific case, but this should work.

If you'd like to use the NavItem styles throughout your app, I'd recommend creating a wrapper component for this:

import { NavItem } from 'rebass'
import { Link } from 'react-router'

const MyNavItem = (props) => (
  <NavItem
    {...props}
    Component={Link} />
)

export default MyNavItem

Then you'd use it like this:

<MyNavItem to='/' children='Home' />

from rebass.

Some point from me. Don't be too clever ;)

Below code WILL NOT work.

import { Button } from 'rebass'
const LinkButton = styled(Button).attrs({
  is: Link,
})`
  text-decoration: none;
`

React complains about calling component directly and styled-components crashes.
Solution to this is similar to above:

import { Button } from 'rebass'
const StyledButton = styled(Button)`
  text-decoration: none;
`

function LinkButton(props) {
  return <StyledButton {...props} is={Link} />
}

from rebass.