React useState 不使用 <Link>

Question

我无法在单击 时更新 ReactJS 中变量的状态。它在没有路由的情况下工作正常，但是当我添加到 =“/myUrl”时，它在下面不起作用，这是我的代码

const [pageTitle, setPageTitle] = useState("Home");
  const updatePageTitleText = (newValue) => {
    setPageTitle(newValue);
  };

路线列表

 <div>
 <ul>
    <li>
      <Link onClick={() => updatePageTitleText("Home")} to="/">
        Home
      </Link>
    </li>
    <li>
      <Link onClick={() => updatePageTitleText("About")} to="/about">
        About
      </Link>
    </li>
    <li>
      <Link onClick={() => updatePageTitleText("Services")} to="/services">
        Services
      </Link>
    </li>
  </ul>
</div>

并找到我的组件

 <Toolbar pageTitleProps={pageTitle} />

Answer 1

我认为最好的方法是使用 useLocation 挂钩并从 Link 中删除 onClick 事件，如下所示：

    import { useLocation } from 'react-router-dom';
    const [pageTitle, setPageTitle] = useState("Home");
    let location = useLocation();
    useEffect(() => {
            updatePageTitleText(location);
        }, [location]);
    const updatePageTitleText = (newValue) => {
        setPageTitle(newValue);
    };
    <Link to="/">
        Home
    </Link>