React Router v6 onclick

Question

我以前問過同樣的問題，但現在它不適用於 react-router v6。

我已將問題簡化為單擊<Link />時如何輸出到控制台？

側邊菜單組件中的鏈接

<Link to={"/entity"}>Entity</Link>

來自主 app.js 的路由

<Routes>
    <Route path="/entity" element={<Entity />} />
</Routes>

第二次單擊鏈接后如何執行操作（頁面已經顯示）此示例只是在單擊<Link>時輸出到控制台，但輸出僅顯示第一次加載（或安裝）

function Entity(props) {

    console.log('link clicked');

    useEffect(() => {
        console.log('link clicked');
    });

}

Answer 1

與之前的解決方案相比，新的解決方案的主要變化是 RRDv6 沒有Redirect組件並且Link組件 API 略有變化，路由狀態現在是一級 prop 而不是嵌套在to prop 對象上。

關聯

<Link
  onClick={() => setLinkKey(uuidV4())}
  key={linkKey}
  to={"/users"}
  state={{ key: linkKey }}
>
  Users
</Link>

如果已經在路由上，則在該路由上呈現的組件仍然只是在再次單擊該鏈接時查找要更改的鍵。

Answer 2

您可以將 onClicke 用作 Link 中的道具：

  <Link to={"/entity"}   onClick={()=>{
        console.log('link clicked');

         useEffect(() => {
                console.log('link clicked');
            });
}}>Entity</Link>