如何知道根布局的某些子组件是否正在加载

Question

我正在做一个应用程序，需要在页面更改为另一条路线或正在加载数据时在导航栏中显示加载点，但我不知道如何使用 RouterProvider 来做到这一点。我尝试使用 useNavigation 但状态始终处于空闲状态。

这是我的 App.tsx，其中 RouterProvider 位于

import DetailsPage from "@pages/Details"
import EpisodePage from "@pages/Episode"
import HomePage from "@pages/Home"
import RootLayout from "@pages/Root"
import { RouterProvider, createBrowserRouter } from "react-router-dom"

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />, // In this component should show the loading dot
    children: [
      {
        index: true,
        element: <HomePage />,
      },
      {
        path: '/podcast/:podcastId',
        element: <DetailsPage />
      },
      {
        path: '/podcast/:podcastId/episode/:episodeId',
        element: <EpisodePage />
      }
    ]
  }
])

const App = () => {

  return <RouterProvider router ={ router } />
}

export default App

还有我的 RootLayout 组件

import Navbar from '@components/UI/Navbar'
import { Outlet, useNavigate, useNavigation } from 'react-router-dom'

export const RootLayout = () => {
  const navigation = useNavigation()
  return <>
          <Navbar>
            <h1>Podcasters</h1>
            {navigation.state} // Here is where I want to have the dot to show the user it is loading
          </Navbar>
          <Outlet />
        </>
}

export default RootLayout

Answer 1

导航具有三种状态。

1. 空闲
2. 正在提交
3. 加载中

因此您可以跟踪其中任何一个。

例如，您可以这样做：

{navigation.state !== "idle" && <p>Navigation in progress...</p>}

查看此官方文档：https://reactrouter.com/en/main/hooks/use-navigation#navigationstate 或者检查这个示例：https://github.com/remix-run/react-router/blob/dev/examples/lazy-loading-router-provider/src/App.tsx

Answer 2

你已经解决了吗？我和你一样陷入了同样的问题。导航状态始终为“空闲”。但我最终想通了，你必须为路线设置一个加载器，这是有道理的。这是来自 React Router 官方网站的示例。

{
    element: <Team />,
    path: ":teamId",
    loader: async ({ params }) => {
      return fetch(`/api/teams/${params.teamId}.json`);
    }

}