Link and NavLink react-router-dom components :hover not working

[austincondiff]

The hover does not work on react router components.

<li key="contactInfoPage" style={{display: 'inline-block'}}>
    <NavLink to="/contact-info" style={{
        display: 'inline-block',
        padding: '20px 16px 0 16px',
        textDecoration: 'none',
        color: '#36495a',
        textTransform: 'uppercase',
        fontSize: 12,
        fontWeight: 'bold',
        transition: '.2s',
        //the :hover below does not work
        ':hover': {
            color: '#0078d2'
        }
    }}>Contact Info</NavLink>
</li>

Sure I could simply style a span inside but where's the fun in that?

[mvbattan]

@acondiff Take a look at https://github.com/FormidableLabs/radium/tree/master/docs/faq#why-doesnt-radium-work-on-react-routers-link-or-react-bootstraps-button-or-someothercomponent

[mvbattan]

I'd close this since is duplicated: #398

[Nimelrian]

Definitely not fixed with the workaround when using React Router v4.2.2 and Radium v0.19.4.
Wrapping a Link or NavLink using the Radium HOC before using them does not cause the pseudo-selectors to work.

Minimal, Complete, and Verifiable Example:

import React from "react";
import { render } from "react-dom";
import { BrowserRouter, Link, NavLink } from "react-router-dom";
import Radium from "radium";

const RadiatingNavLink = Radium(NavLink);
const RadiatingLink = Radium(Link);

const App = () =>
  <BrowserRouter>
    <div>
      <div>
        <RadiatingNavLink
          to="/test1"
          style={{ background: "red", ":hover": { background: "green" } }}
          activeStyle={{ background: "cyan" }}
        >
          test1
        </RadiatingNavLink>
      </div>
      <div>
        <RadiatingNavLink
          to="/test2"
          style={{ background: "red", ":hover": { background: "green" } }}
          activeStyle={{ background: "cyan" }}
        >
          test2
        </RadiatingNavLink>
      </div>
      <div>
        <RadiatingNavLink
          to="/test3"
          style={{ background: "red", ":hover": { background: "green" } }}
          activeStyle={{ background: "cyan" }}
        >
          test3
        </RadiatingNavLink>
      </div>
      <div>
        <RadiatingLink
          to="/test3"
          style={{ background: "red", ":hover": { background: "green" } }}
        >
          LinkTest
        </RadiatingLink>
      </div>
    </div>
  </BrowserRouter>;

render(<App />, document.getElementById("root"));

[yonasstephen]

Yes, it is not working using React Router v4.2.0 and Radium v.0.19.5. Any other workaround?

[jakubrpawlowski]

My temporary solution: remix-run/react-router#5496

[hardy1334]

@yonasstephen I'm also facing the similar problem,not working with React Router4.2.0

[martinpalmieri]

I use Glamor (https://github.com/threepointone/glamor) like this:

  const style = {
    MenuLink: {
      textDecoration: "none",
      color: "#000",
      ":hover": { color: "#8062ba" }
    }
  };

<NavLink to={item.path} {...css(style.MenuLink)} activeStyle={{ fontWeight: "600" }}>
  {item.name}
</NavLink>

[blu3printchris]

Any update on this? @Nimelrian answer works for me.

[douglasrcjames]

Bumping this, an issue for me now and none of the workarounds above work.