When using the Link component, it will display an <a> element on a webpage. If you want to alter its color, simply insert this style:

a {
  color: black;
}

To experiment with it, click here.

Instead of using a div, you can assign classes directly to links:

.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 a sample implementation:

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

I highly suggest utilizing styled-components to easily add CSS styles to your components.

To learn more about styling any component using styled-components, visit this link.

https://i.sstatic.net/8uttM.png

  <Anchor path="#" style="main">
                <h2>Anchor</h2>
             </Anchor>

To ensure that the link remains active when clicked, you must pass a prop to the child component from the parent component and use a ternary operator to apply a className to the Link element that matches the active prop passed.

Here is an 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

Instead of having a separate div element, you can simply add the className directly to the Link component without the need for individual classNames.

If you want to change the color of the link when it is selected, you can use the 'active' selector or if you prefer it to change only after being clicked, you can use 'visited'.

Here is an example using the 'active' selector:

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

I'm assuming you are importing a css file for the styling?

<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>

To change the color of a link by clicking the text, you need to utilize an onClick method and state to store the new color preference. The code snippet provided below demonstrates how to achieve this functionality within a functional component:

    const [linkColor, setLinkColor] = useState("");

  const handleColorChange = () => {
     setLinkColor("blue");
  }

  return (
    <div className="left-navlinks">
      <div className="navlink1" style={{ color: linkColor }} onClick={handleColorChange}>Home</div>
    </div>
  );

In my opinion, using NavLink from react-router-dom is more preferable to Link. NavLink returns an anchor tag, allowing you to target them specifically with CSS styling. For example, you could use .navlinks > a { color: black } to change the color of the links. If you want to change the color when the link is active, you may need to use !important to override any existing styles. I hope this solution proves helpful.

const currentLocation = useLocation();

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

Please give this a try, it has been effective for me.