不能在回調中調用 React Hook “useLocation”

Question

在 react v6 中使用 useLocation 進行路由，並且錯誤消息說 React Hook “useLocation”不能在回調中調用。 這在 v5 中不是問題，所以只是詢問如何解決這個問題的建議。

const Loadable = (Component) => (props) => {
  const { pathname } = useLocation();
  const isDashboard = pathname.includes("/dashboard");

  return (
    <Suspense
      fallback={
        <LoadingScreen
          sx={{
            ...(!isDashboard && {
              top: 0,
              left: 0,
              width: 1,
              zIndex: 9999,
              position: "fixed",
            }),
          }}
        />
      }
    >
      <Component {...props} />
    </Suspense>
  );
};

Answer 1

看起來Loadable生成了一個反應組件，但你不能在反應組件（或另一個鈎子）之外調用反應鈎子，所以這種模式不太適用。

您可以通過使Loadable成為組件並將Component呈現為子組件來潛在地解決此問題。

像這樣的東西：

const Loadable = ({children}) => {
  const { pathname } = useLocation();
  const isDashboard = pathname.includes("/dashboard");

  return (
    <Suspense
      fallback={
        <LoadingScreen
          sx={{
            ...(!isDashboard && {
              top: 0,
              left: 0,
              width: 1,
              zIndex: 9999,
              position: "fixed",
            }),
          }}
        />
      }
    >
      {children}
    </Suspense>
  );
};

然后你會像這樣使用它：

<Loadable>
    <Component  /> // You can add any props directly to the child here
</Loadable>