如何設定重定向到反應組件的元素的樣式？

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

現在，我想在你選擇一個頁面時做這個，比如主頁、關于、計算器等；它使用 標記鏈接border-bottom: 1px solid white;，但是在使用時

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

它只是不起作用。任何想法為什么？可能是因為它重定向到不同的網址？如果是這樣，那么我還應該將 app.css 匯入到我的 Home、About 等組件中嗎？

uj5u.com熱心網友回復：

您應該使用Link, 或者NavLink如果您想應用活動樣式，而不是原始錨<a />標記。使用傳遞道具function的className道具的回呼isActive。

導航鏈接

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>

標籤：html css 反应 反应路由器 反应路由器-dom

上一篇：垂直滾動在螢屏大小下不起作用

下一篇：如何有條件地將專案放置在容器的右側或左側？