`className` prop is not applied on `<Link />` component when generated with server-side rendering
See original GitHub issueVersion
3.0.5
Steps to reproduce
- Use server-side rendering with
renderToString,RouterContextandmatch - Provide a
classNameprop 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:
- Created 6 years ago
- Reactions:1
- Comments:7 (4 by maintainers)
Top 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
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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

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.
Here’s proof: https://codesandbox.io/s/20v898125p