更改 NavLink 文本顏色 onClick

Question

如何在反應中更改導航欄中鏈接的文本顏色。

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>

我試過用懸停屬性來做，但它不起作用。 我想在單擊並選擇鏈接時將文本顏色設為藍色

Answer 1

NavLink為我們提供了很好的解決方案，如下所示：

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

應用程序.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

Link組件將呈現一個<a>元素。 所以要改變它的顏色，只需添加這個樣式：

a {
  color: black;
}

你可以在這里試試。

Answer 3

而不是在 div 中添加。 您可以直接通過類來鏈接：

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

這是其中的一個：

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/>
  );
}

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

Answer 4

我建議您使用styled-components將 css 添加到組件中。

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

Answer 5

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

Answer 6

為了在單擊時將鏈接保持為活動鏈接，您需要從父組件向此子組件傳遞一些道具，並使用三元運算符將 className 應用於與傳遞的道具匹配的活動鏈接。

例如：-

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

您應該能夠完全刪除 div 並在 Link 組件上擁有 className，也不需要為每個組件使用不同的 className。

要在鏈接是當前選擇的選項時更改顏色，您可以使用“活動”選擇器，或者如果您只想在單擊它時更改顏色，則可以使用“已訪問”。

這是一個帶有“活動”選擇器的示例。

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

我還假設您正在為該樣式導入一個 css 文件？

<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

因此，如果您想通過單擊文本來更改鏈接顏色，您應該使用 onClick 方法。使用狀態來存儲您想要的新顏色。代碼如下。注意我使用了一個功能組件

    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

首先，我認為使用 react-router-dom 中的 NavLink 而不是 Link 更好。 現在 NavLink 返回一個標簽。 所以你可以定位他們 .navlinks > a { color: black }。 但是，如果您想在活動時更改顏色，例如您可能需要 !important 以覆蓋它。 希望它有效。

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>

請試試這個。 這對我有用。