Change NavLink text Color onClick

Question

How can I change the text color of the links in the navbar in react.

navLink1{
color: black;
}

   
<div className="left-navlinks">
                    <img className="logo" src={logo}/>
                    <Link to="/"></Link>
                    <Link to="/home"> <div className="navlink1">Home</div></Link>
                    <Link to="/about"> <div className="navlink2">About</div></Link>
                    
</div>

I have tried doing it with hover property, but it is not working. I want to make the text color blue when the link is clicked and selected

Answer 1

NavLink gives us good solution for this, like that:

navItem.module.css:

.left_navlinks a {
   color:black;
   text-decoration: none;
 }
 
 .left_navlinks a:hover,
 .left_navlinks a:active,
 .left_navlinks a.active {
   color: blue;
 }

App.js:

import React from "react";
import { NavLink } from "react-router-dom";
import classes from "./navItem.module.css";

class App extends React.Component {
   render() {
      return (
         <>
            <div className={classes.left_navlinks}>
               <img className="logo" src={logo} />
               <NavLink to="/"></NavLink>
               <NavLink to="/home" activeClassName={classes.active}>
                  Home
               </NavLink>
               <NavLink to="/about" activeClassName={classes.active}>
                  About
               </NavLink>
            </div>
         </>
      );
   }
}

export default App;

Answer 2

The Link component will render a <a> element. So to change its color, just add this style:

a {
  color: black;
}

You can try it here .

Answer 3

Instead of adding in div. You can directly pass class to link:

.navLink1{
color: black;
}

   
<div className="left-navlinks">
                    <img className="logo" src={logo}/>
                    <Link to="/"></Link>
                    <Link to="/home" className="navlink1"> Home</Link>
                    <Link to="/about" className="navlink2">About</Link>                    
</div>

Here is one poc of this:

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import "./style.css";

function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/" className="navLink1">
              Home
            </Link>
          </li>
          <li>
            <Link to="/about" className="navlink2">About</Link>
          </li>
          <li>
            <Link to="/dashboard" className="navLink1">Dashboard</Link>
          </li>
        </ul>

        <hr />

        {/*
          A <Switch> looks through all its children <Route>
          elements and renders the first one whose path
          matches the current URL. Use a <Switch> any time
          you have multiple routes, but you want only one
          of them to render at a time
        */}
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

// You can think of these components as "pages"
// in your app.

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}



export default function App() {
  return (
    <BasicExample/>
  );
}

Demo: https://stackblitz.com/edit/react-kcmdvt?file=src/App.js

Answer 4

i recommended you to use styled-components for add css to the components.

https://styled-components.com/docs/basics#styling-any-component

Answer 5

  <Link href="#" color="primary">
                <h2>Link</h2>
             </Link>

Answer 6

In order to keep the link as an active link when clicked, you will need to pass some prop to this child component from parent component and have a ternary operator to apply className to the Link which matches active from prop passed.

For example:-

import React from 'react';
import { Link } from 'react-router-dom';

function navLink({activeLink}) {
    return (
        <div className="left-navlinks">
            <img className="logo" src={logo}/>
            <Link to="/"></Link>
            <Link to="/home"> <div className={activeLink === home ? `active-navlink` : `normal-navlink`}>Home</div></Link>
            <Link to="/about"> <div className={activeLink === about ? `active-navlink` : `normal-navlink`}>About</div></Link>                    
        </div>
    )
}

export default navLink

Answer 7

You should be able to remove the div altogether and have the className on the Link component, there's also no need for a different className for each one.

To change the color when the link is the currently selected option you could use the 'active' selector, or if you just want it to change if it has been clicked then you could use 'visited'.

Here's an example with the 'active' selector.

navLink: {
  color: black;
}
navLink:active {
  color: blue;
}

I also assume you're importing a css file for the style?

<div className="left-navlinks">
                    <img className="logo" src={logo}/>
                    <Link to="/"></Link>
                    <Link to="/home" className="navLink">Home</Link>
                    <Link to="/about" className="navLink">About</Link>
                    
</div>

Answer 8

So if you want to change the link color by clicking the text you should use an onClick method.Use state to store the new color that you want.The code is as follows.Note that i have used a functional component

    const [Color, setColor] = useState([""])
  const handleColor= e =>{
     setColor("blue")
      
  }
return (
    <div className="left-navlinks">

     <div className="navlink1" style={{color:Color}}  onClick={handleColor}>Home</div>
    

Answer 9

First of all i think its better to use NavLink from react-router-dom rather the Link. Now NavLink returns an tag. So you can target them .navlinks > a { color: black }. However if you want to change the color when active for instance you probably need the !imporant in order to overwrite it. Hope it works.

Answer 10

const location = useLocation();

    <div>
        <img className="logo" src={logo}/>
        <Link to="/"></Link>
        <Link to="/home" className={location.pathname === "/home" ? "navLink1": ""}> Home</Link>
        <Link to="/about" className={location.pathname === "/about" ? "navLink1":""}> About</Link>
    </div>

Please try this. This works for me.