question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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>

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
timdorrcommented, Aug 3, 2017

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.

1reaction
timdorrcommented, Apr 2, 2018
Read more comments on GitHub >

github_iconTop Results From Across the Web

className prop is not applied on <Link /> component when ...
Expected Behavior. I expect to see the class attribute have the value of the className prop on the generated anchor tag. Actual Behavior....
Read more >
Warning: Prop `className` did not match. when using styled ...
It looks like the className prop that is being set on your component is not the same when the component is rendered on...
Read more >
JSS integration with React
A lib for generating CSS from JavaScript.
Read more >
JSS integration with React
Basic; Dynamic Values; Theming; Server-side rendering ... It injects a classes prop, which is a simple map of rule names and generated class...
Read more >
Web Components in Server-Side Rendered (SSR) and Static ...
Let's write the template function that generates the component's stringified HTML from the passed props. ( components/pinned-location-link/ ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found