React-router: `className` prop is not applied on `<Link />` component when generated with server-side rendering

[mshwery]

Version

3.0.5

Steps to reproduce

1. Use server-side rendering with renderToString, RouterContext and match
2. Provide a className prop to <Link />

Expected Behavior

I expect to see the class attribute have the value of the className prop on the generated anchor tag.

Actual Behavior

The class attribute is missing on the generated anchor tag. Other className props are correctly applied on non-react-router components.

The match function:

/**
 * Use react-router's `match` to handle mapping inbound requests to the right prerendered component path
 * @see {@link https://github.com/ReactTraining/react-router/blob/master/docs/guides/ServerRendering.md}
 */
function ssr (req, res) {
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    if (error) {
      return res.status(500).send(error.message)
    }

    if (redirectLocation) {
      return res.redirect(302, redirectLocation.pathname + redirectLocation.search)
    }

    let content
    if (renderProps) {
      // You can also check renderProps.components or renderProps.routes for
      // your "not found" component or route respectively, and send a 404 as
      // below, if you're using a catch-all route.
      content = renderToString(<RouterContext {...renderProps} />)
    } else {
      content = 'Not found'
      res.status(404)
    }

    return res.send(createPage(content))
  })
}

The <Link /> component with className prop:

<Link className='some-value' to={`/path/to/somewhere`}>Test</Link>

The output of this component:

<a href='/path/to/somewhere'>Test</a>

[timdorr]

This is a bug tracker, not a support system. For usage questions, please use Stack Overflow or Reactiflux. Thanks!

[mshwery]

@timdorr How is this not a bug? It is supposed to be supported according to the v3 docs:

You can also pass props you'd like to be on the <a> such as a title, id, className, etc.

https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#others

[timdorr]

This definitely works (I've done it in production a number of times). Something outside of the library or with your configuration is likely wrong, which falls into the category of a usage question.

[cchaffatt-aurotfp]

Yes @mshwery, I am having this issue as well and it is definitely a bug. It seems you have to explicitly assign css props via the style prop to get to work. Though this is undesirable especially since every other component/element is using className.

[timdorr]

We don't do anything to className or any other props provided to <Link>. We pass them directly to the underlying <a>.

Again, this isn't something with our library, but with your configuration or tooling. Something else is intercepting and filtering out the className prop.

[timdorr]

Here's proof: https://codesandbox.io/s/20v898125p

[cchaffatt-aurotfp]

You are correct. It started working for me but is very brittle it seems: prefers to remove the class prop. Thanks