如何通过相同道具的按钮路由到这些页面？

Question

我试图将相同道具的四个按钮路由到不同的反应路线，但它不起作用。我已经创建了路线，尝试使用 Navigate 但它不起作用。

     import React, {useState} from "react";
         import classes from "../classes";
    
function Card(props) {
         const [click, setClick] = useState("/")
            const activeButton = document.querySelector (".btn");
            const handleClick = () => {
             switch   (activeButton){
             case classes.id1:
          setClick ("jss-1-record")
          break;
          case classes.id2:
          setClick ("jss-2-record")
          break;
          case classes.id3:
          setClick ("jss-1-record")
          break;
          case classes.id4:
          setClick ("jss-2-record")
        
          default:
          setClick ("Page-Structure")
             }
          }
    
      return (
        
          <div className="container">
            <div className="card">
              <div className="top">
                <img className="circle-img" src={props.img} alt="" />
              </div>
              <div className="bottom">
              <button className="btn" onClick= {() =>{click && handleClick }}>
          <h2>{props.name}</h2>
        </button> 
    
           </div>
         </div>
          </div>
      );
      }
    export default Card; 

Answer 1

你不需要这个，你需要了解道具的威力。

function Card(props) {
    // imported from react-router-dom
    const navigate = useNavigate()
    // imported from react-router-dom
    const location = useLocation()
    
  const handleClick = () => {
    // Use the virtual router for reassign location
    navigate(props.path)
  };
  return (
    <div className="container">
      <div className="card">
        <div className="top">
          <img className="circle-img" src={props.img} alt="" />
        </div>
        <div className="bottom">
            {/* if location path is the same of the card props.path add active class for trigger it in your css */}
          <button className={`btn ${location.path === props.path && "active"}`} onClick={handleClick}>
            <h2>{props.name}</h2>
          </button>
        </div>
      </div>
    </div>
  );
}

function ParentComponent() {
    //define your props in the parent 
const btnProps = [
    {name:"btn1", path: "/", img:"https://url-or-src"},
    {name:"btn2", path: "/blog", img:"https://url-or-src"},
    {name:"btn3", path: "/article", img:"https://url-or-src"},
    {name:"btn4", path: "/comment", img:"https://url-or-src"}
]
    return (
        // react fragment <> for wrap many element without use div 
        <>
        <h1>Exemple parent title</h1>
        {btnProps.map((btnProp, index) =>  <Card key={index} props={btnProp}/>)}
        </>
      );
    
}

    

理想情况下，像卡片这样的元素应该只渲染和解释其由父级分发的道具，因此您的组件是可重用的。

我认为您已尝试瞄准活动按钮。

一些库可以为你做到这一点，并且react-router-dom的组件提供了活动按钮的本机跟踪，在你的情况下，如果它是某种菜单或导航栏，这可能是一个更好的解决方案。