BrowserRouter 链接覆盖 onClick 事件

Posted 2023-02-22

【中文标题】BrowserRouter 链接覆盖 onClick 事件

【英文标题】：BrowserRouter Link overriding onClick event

【发布时间】：2021-11-12 21:46:56

【问题描述】：

我正在尝试在单击事件后更新状态挂钩。但是，我的组件实例周围的 BrowserRouter 链接覆盖了它的 onClick 函数。

但是当我删除“链接到”时，状态成功更新并在控制台中打印。

最终，我希望能够将更新后的状态传递给 PlayerPage 组件。但是我现在正在使用控制台来测试它的更新 - 它没有。

这是我的代码：

Home.js - 包含点击事件。

import  Link  from "react-router-dom";
import  useState, useEffect  from "react";

export default function Home() 
  
const [task, setTask] = useState();

  useEffect(() => 
    console.log(task);
  ,[task])

  return (
    <>
     <Header />
      <main className="home-main">
       <div className="main-wrap">
        <section className="card-container">
         <h1>Good Morning</h1>
           <h1>Choose Your Work Style</h1>

            <div className="card-wrap">
              <Link to="/PlayerPage">
                  <Card onClick=() => setTask('Short Task')
                    taskName="Short Task"
                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                  />
              </Link>
            </div>
   </>
 );

PlayerPage.js - 链接的目的地

import Header from "../components/Header";
import Timer from "../components/Timer";
import "./PlayerPage.scss";

export default function PlayerPage() 
  return (
    <>
      <Header />
      <main className="player-page-main">
        <div className="player-page-main-wrap">
          <div className="timer-title-wrap">
            <Timer />
            <h2 className="task-title">Task Name Will Go Here</h2>
          </div>
        </div>
      </main>
    </>
  );

【参考方案1】：

<Link to= pathname: "/PlayerPage", state:  task   />

在您的 PlayerPage 组件中，您的任务值可以从 location 属性访问。

this.props.location.state.data

【参考方案2】：

好的，这就是我的想法。

点击事件正在传播到Link 组件，因此您可以调用event.stopPropagation() 来防止点击事件冒泡，但现在链接将不起作用。

如果您同时使用两者，则链接不会等待状态更新。

我认为最好的选择是不使用任何本地状态并在链接中以路由状态传递数据。使用 to 属性的对象版本指定 pathname 和路由 state 用于导航转换。

export default function Home() 
  return (
    <>
      ...
      <Link
        to=
          pathname: "/PlayerPage",
          state: 
            task: 'Short Task',
          ,
        
      >
        <Card
          taskName="Short Task"
          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        />
      </Link>
      ...
    </>
  );

然后从接收组件中的location对象访问路由状态。

import  useLocation  from 'react-router-dom';

export default function PlayerPage() 
  const  state  = useLocation();
  return (
    <>
      <Header />
      ...
        <h2 className="task-title">state.task</h2>
      ...
    </>
  );

【讨论】：

完美运行。感谢您的帮助和解释！