Question

嘿，我刚刚开始学习React，并且对HTML，CSS和JavaScript有了很好的了解。如果它是活动的链接，我尝试使用几种不同的方式尝试使用它，但我无法获得此NavBar来更改颜色，但是没有任何效果。我有想要的布局，我只是不知道我是否在编写JSX代码时出错，但是任何帮助或提示都将是令人惊讶的。

为NavBar反应JSX代码

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

import "./NavBar.scss";

const NavBar = () => {
  return (
    <ul class="tab-bar">
      <Link to="/" className="tab">
        <li>Flash Cards</li>
      </Link>
      <Link to="/sets" className="tab">
        <li>Sets</li>
      </Link>
      <Link to="/new" className="tab">
        <li>New</li>
      </Link>
      <Link to="/about" className="tab">
        <li>About</li>
      </Link>
      <Link to="/login" className="tab">
        <li>Login</li>
      </Link>
    </ul>
  );
};

export default NavBar;

用于NavBar的SCSS

$primary-color: #0f9b8e;
$secondary-color: #343837;
$tertiary-color: #03719c;

body {
  background: $secondary-color;
}
.tab-bar {
  margin: 0px;
  padding: 0px;
  display: flex;
  list-style-type: none;
}

.tab {
  width: 100%;
  padding: 20px 0;
  background: $primary-color;
  color: white;
  overflow: hidden;
  text-align: center;
  flex-grow: 1;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}

.tab:hover,
.tab:active {
  background: $tertiary-color;
}

Answer 1

    import React, {useState} from "react";
    import { Link } from "react-router-dom";

    import "./NavBar.scss";

    const NavBar = () => {

  const [currentLink, setCurrentLink] = useState('');

  let background = {};
  switch(currentLink){
  case 'flash':
   background= { backgroundColor: 'red'};
   break;
  case 'sets':
   background= { backgroundColor: 'blue'};
   break;
  case 'new':
   background= { backgroundColor: 'green'};
   break;
  case 'about':
   background= { backgroundColor: 'yellow' };
   break;
  case 'login':
   background= { backgroundColor: 'cyan'};
   break;
  default:
   background = {}
}

  return (
    <ul class="tab-bar" style={background}>
      <Link to="/" className="tab" onClick={() => setCurrentLink('flash')}>
        <li>Flash Cards</li>
      </Link>
      <Link to="/sets" className="tab" onClick={() => setCurrentLink('sets')}>
        <li>Sets</li>
      </Link>
      <Link to="/new" className="tab" onClick={() => setCurrentLink('new')}>
        <li>New</li>
      </Link>
      <Link to="/about" className="tab" onClick={() => setCurrentLink('about')}>
        <li>About</li>
      </Link>
      <Link to="/login" className="tab" onClick={() => setCurrentLink('login')}>
        <li>Login</li>
      </Link>
    </ul>
  );
};

    export default NavBar;

这将起作用。

Answer 2

除了使用状态外，其他选项是：

1）只需使用NavLink 和activeClassName。它将自动读取网址并根据您的网址路径名调整样式

<NavLink activeClassName="active" className={"tab"} to="/contact">Contact</NavLink>

2）使用useHistory钩子并读取当前网址并动态调整样式

...
const currentRoute = useHistory().location.pathname.toLowerCase();
...
<Link className={currentRoute.includes("home") ? "tab active" : "tab"} to="/home"> 
 Home
</Link>
...

code sample (in the codesandbox)

的工作副本

完整代码段

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { useHistory, NavLink } from "react-router-dom";
import "./styles.scss";
const Nav = props => {
  const currentRoute = useHistory().location.pathname.toLowerCase();
  return (
    <div className="tab-bar">
      <Link
        className={currentRoute.includes("home") ? "tab active" : "tab"}
        active
        to="/home"
      >
        Home
      </Link>
      <Link
        className={currentRoute.includes("about") ? "tab active" : "tab"}
        to="/about"
      >
        About
      </Link>
      <NavLink activeClassName="active" className={"tab"} to="/contact">
        Contact
      </NavLink>
    </div>
  );
};

export default Nav;

React导航栏更改活动链接上的背景

2 个答案: