在 React 按钮组件中处理路由的更好方法是什么？

Question

我希望我的按钮组件在单击按钮时重定向用户。有时，单击按钮会将用户重定向到外部链接。最好的方法是什么？

我有一个处理路由和其他 onClick 事件的按钮组件。我想知道处理路由的更好方法是什么。我的意思是我应该喜欢下面的代码吗？

import { useNavigate } from "react-router-dom";
import Button from "../Button/Button";
import Container from "../Container/Container";
import Header from "../Header/Header";
import "./Hero.css";

const Hero: React.FC = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/auth");
  };

  return (
    <section>
      <Container>
        <div className="hero">
          <div className="hero-content">
            <Header
              primaryHeader="An example app built using React.js 18, typescript."
              taglineHeader="I'm building a web app with React.js 18 and typescript. Aim of the project is to learn typescript."
            />
            <div className="action-buttons">
              <Button secondary label="get started" action={handleClick} />
              <Button label="github" />
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

export default Hero;

或者我应该用像下面的代码这样的链接包装按钮？

import Button from "../Button/Button";
import Container from "../Container/Container";
import Header from "../Header/Header";
import "./Hero.css";

const Hero: React.FC = () => {
  return (
    <section>
      <Container>
        <div className="hero">
          <div className="hero-content">
            <Header
              primaryHeader="An example app built using React.js 18, typescript."
              taglineHeader="I'm building a web app with React.js 18 and typescript. Aim of the project is to learn typescript."
            />
            <div className="action-buttons">
<Link to='/'
              <Button secondary label="get started" />
</Link>
              <Button label="github" />
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

export default Hero;

我正在考虑另一种方法，将按钮组件包装在标签中，然后将路径作为道具传递。就像下面这样。

import { Link } from "react-router-dom";
import "./Button.css";

interface ButtonProps {
  label: string;
  secondary?: boolean;
  action?: () => void;
  path?: string;
}

const Button: React.FC<ButtonProps> = ({ label, secondary, action, path }) => {
  return (
    <Link to={path || ""}>
      <button
        className={secondary ? "button secondary" : "button"}
        onClick={action}
      >
        {label}
      </button>
    </Link>
  );
};

export default Button;

或者还有其他更好的方法吗？另外，有时我也可能会在单击按钮时将用户重定向到外部链接。

谢谢。

Answer 1

对于单个可重复使用的按钮组件来说，这工作量是否太大了？处理应用程序路由、导航到外部链接，以及处理您的应用程序打算执行的任何其他类型的操作。对于这种情况，我将添加回调函数，该函数将在单击事件时触发。例如：

export const Hero = (callback) => {
  return (
    <section>
      <Container>
        <div className="hero">
          <div className="hero-content">
            <Header
              primaryHeader="An example app built using React.js 18, typescript."
              taglineHeader="I'm building a web app with React.js 18 and typescript. Aim of the project is to learn typescript."
            />
            <div className="action-buttons">
              <Button secondary label="get started" action={callback} />
              <Button label="github" />
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

现在在你使用它的地方：

<Hero callback={() => {do someting}}

我的意思是，您可以将所有这些功能添加到可重用按钮组件中，但是随着时间的推移，当您的项目不断增长时，将很难处理所有这些功能。您可以添加更多“标志”道具，您可以使用这些道具来确定是否在应用程序导航或其他内容中处理到外部源的导航。

export const Hero = (callback, isExternalNav, isInAppNav) => {{/*rest of the logic*/}}

希望这对你有一点帮助。