浏览器路由器链接覆盖onClick事件 [英] BrowserRouter Link overriding onClick event

问题描述

我正在尝试在Click事件后更新状态挂钩。但是，浏览器路由器围绕My Component实例的链接正在覆盖其onClick函数。

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

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

以下是我的代码：

Home.js-包含Click事件。

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>
    </>
  );
}

推荐答案

好的，这就是我所想的情况。

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

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

我认为最好的选择是而不是使用任何本地状态并在链路中以路由状态传递数据。使用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>
      ...
    </>
  );
}

这篇关于浏览器路由器链接覆盖onClick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！