如何在特定路线添加微调器？

Question

我得到的代码有问题：

import Router from "next/router";

export default function App({ Component, pageProps }) {
  const [loading, setLoading] = React.useState(false);
  React.useEffect(() => {
    const start = () => {
      console.log("start");
      setLoading(true);
    };
    const end = () => {
      console.log("findished");
      setLoading(false);
    };
    Router.events.on("routeChangeStart", start);
    Router.events.on("routeChangeComplete", end);
    Router.events.on("routeChangeError", end);
    return () => {
      Router.events.off("routeChangeStart", start);
      Router.events.off("routeChangeComplete", end);
      Router.events.off("routeChangeError", end);
    };
  }, []);
  return (
    <>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <Component {...pageProps} />
      )}
    </>
  );
}

它对我有用，但是对于所有路由，我只想使用一些路由，并且路由有动态查询，我该怎么做？

Answer 1

首先，您需要定义一个您不希望有加载状态的路由列表。例如

//`/details/` can be a dynamic route like `/details/1`, `/details/2`, etc.
const EXCEPTED_ROUTES = ['/details/'] //routes based on definitions

然后你可以在routeChangeStart事件

中使用URL参数来完成

const start = (url) => {
   const isURLMatched = EXCEPTED_ROUTES.some(exceptedRoute => url.startsWith(exceptedRoute))
   if(isURLMatched) { //the condition here is your choice
      return //should not set loading state
   }
   console.log("start");
   setLoading(true);
};

如何在特定路线添加微调器？

How to add Spinner at specific route?

next.js