ページを次のページに読み込みます.js

私はミニマリストのウェブサイトの巨大な支持者です、私はアニメーションとデザインでひどく過度に設計されたウェブサイトを憎みません、しかし、彼らには場所があります.アニメーションの話、あなたが欲しい1つのことは、ページとローディングデータの間を移動を処理する方法です.

次のロードを扱う

つの大きな特徴next /router 能力は、ルートの変更中に発生するイベントにタップすることです.これは、ローディングを処理するためにこれらを使用することを意味します.それで、我々が必要とするイベントは何ですか?ルート変更イベントが必要です

routeChangeStart
routeChangeComplete
routeChangeError

これらの3つのイベントとuseEffect and useState あなたのアプリケーションの各ルートの変更を処理することができます.例えば

function Loading() {
  const router = useRouter();

  const [loading, setLoading] = useState(false);

  useEffect(() => {
      const handleStart = (url) => (url !== router.asPath) && setLoading(true);
      const handleComplete = (url) => (url === router.asPath) && setTimeout(() =>{setLoading(false)},2000);

      router.events.on('routeChangeStart', handleStart)
      router.events.on('routeChangeComplete', handleComplete)
      router.events.on('routeChangeError',  handleComplete)

      return () => {
          router.events.off('routeChangeStart', handleStart)
          router.events.off('routeChangeComplete', handleComplete)
          router.events.off('routeChangeError', handleComplete)
      }
  })

  return loading && (
    <div>loading</>
  )
}

何が起こっているのか

今、あなたは見ての例を持って、私たちはローディング機能を作るために何をしているかについて話しましょう.まず、我々は状態を設定しているloading を返します.これは簡単に交換することができますし、読み込まれていない間、我々はそれを使用しているuseEffect チェックを行う.The useEffect ここで2つの機能を1つの処理を開始すると1つの処理を終了すると、我々はrouter.events 上記の関数は、どのような関数を実行するかを決めます.起動している場合は、HandleStartを実行する必要があります.それ以外の場合は終了し、読み込みをfalseに設定する必要があります.
最後に、実際に読み込まれている場合のみ表示される条件付きレンダラがあります.