如何为重定向以响应组件的元素设置样式？

Question

App.js：

import './App.css';
import logo from './images/logo.png';
import Home from './components/Home';
import About from './components/About';
import Calculators from './components/Calculators';
import Classes from './components/Classes';
import Riddles from './components/Riddles';
import { useRoutes, BrowserRouter as Router } from 'react-router-dom';

const MenuBar = () => {
  return (
    <header className='App-header'>
    <div className="container">
      <a id="home" className="content-tab" href="/"> Home</a>
      <a id="about" className="content-tab" href="/about"> About</a>
      <a id="calcs" className="content-tab" href="/calculators">  Calculators</a>
      <a id="riddles" className="content-tab" href="/riddles">Riddles</a>
      <a id="classes" className="content-tab" href="/classes">Classes</a>
    </div>
  </header>
  )
}

const App = () => {
  let routes = useRoutes([
    { path: "/", element: <Home /> },
    { path: "about", element: <About /> },
    { path: "classes", element: <Classes />},
    { path: "calculators", element: <Calculators />},
    { path: "riddles", element: <Riddles /> },
    // ...
  ]);
  return routes;
};

function AppWrapper() {
  return (
    <div className="App">
      <MenuBar />
      <Router>
        <App />
      </Router>
    </div>
  );
}

export default AppWrapper;

现在，每当您选择一个页面时，比如home、约、计算器等，我都想这样做；它使用border-bottom: 1px solid white;标记链接，但在使用

.container a.active {
  border-bottom: 1px solid white;
} 

只是不起作用。知道为什么吗？可能是因为它重定向到不同的url吗？如果是这样的话，那么我是否也应该将app.css导入到我的Home、About等组件中呢？

Answer 1

如果要应用活动样式，则应该使用Link或NavLink，而不是原始锚<a />标记。对传递给function支柱的className支柱使用isActive回调。

NavLink

import { NavLink } from 'react-router-dom';

const MenuBar = () => {
  const getLinkClassNames = ({ isActive }) => [
    "content-tab",
    isActive ? "active-tab" : null,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <header className='App-header'>
      <div className="container">
        <NavLink
          id="home"
          className={getLinkClassNames}
          to="/"
        >
          Home
        </NavLink>
        <NavLink
          id="about"
          className={getLinkClassNames}
          to="/about"
        >
          About
        </NavLink>
        <NavLink
          id="calcs"
          className={getLinkClassNames}
          to="/calculators"
        >
          Calculators
        </NavLink>
        <NavLink
          id="riddles"
          className={getLinkClassNames}
          to="/riddles"
        >
          Riddles
        </NavLink>
        <NavLink
          id="classes"
          className={getLinkClassNames}
          to="/classes"
        >
          Classes
        </NavLink>
      </div>
    </header>
  );
}

CSS

.active-tab {
  border-bottom: 1px solid white;
}

如果您喜欢v5语法，那么创建一个自定义NavLink组件。

import { NavLink as BaseNavLink } from "react-router-dom";

const NavLink = React.forwardRef(
  ({ activeClassName, activeStyle, ...props }, ref) => {
    return (
      <BaseNavLink
        ref={ref}
        {...props}
        className={({ isActive }) =>
          [
            props.className,
            isActive ? activeClassName : null
          ]
            .filter(Boolean)
            .join(" ")
        }
        style={({ isActive }) => ({
          ...props.style,
          ...(isActive ? activeStyle : null)
        })}
      />
    );
  }
);

用法：

<NavLink
  id="home"
  className="content-tab"
  activeClassName="active-tab"
  to="/"
>
  Home
</NavLink>