如何设置重定向到反应组件的元素？

Posted 2023-02-22

【中文标题】如何设置重定向到反应组件的元素？

【英文标题】：How to style an a element that redirects to react component?

【发布时间】：2022-01-16 11:23:25

【问题描述】：

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;

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

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

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

【参考方案1】：

您应该使用Link 或NavLink，如果您想应用主动样式，而不是原始锚<a /> 标记。将 function 回调用于传递 isActive 属性的 className 属性。

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>