主页 / coding / 问题 / 79197038
Accepted
Loudrous
Asked: 2024-11-17 19:01:24 +0800 CST

如何检查 React 应用程序中的导航是否正在进行中？

  • 772

我找到了一个名为 nprogress 的库，它可以自动在我的 React 应用程序中显示全局进度条。为此，我需要在导航时进行监听。我从 react-router-dom 中找到了钩子 useNavigation ，它必须在RouterProvider中使用，但 id 不支持子项。我尝试这样做：

import { useEffect } from "react";
import "./App.css";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import HomePage from './HomePage.tsx',
import AboutPage from './AboutPage.tsx'
import {
  Route,
  Link,
  useNavigation,
  createBrowserRouter,
  createRoutesFromElements,
  RouterProvider,
} from "react-router-dom";


const ProgressBarHandler = () => {
  const navigation = useNavigation();

  useEffect(() => {
    if (navigation.state === "loading") {
      NProgress.start();
    } else {
      NProgress.done();
    }
  }, [navigation.state]);

  return null;
};

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </>
  )
);

function App() {
  return (
    <RouterProvider
      router={router}
      future={{
        v7_startTransition: true,
      }}
      fallbackElement={<ProgressBarHandler />}
    />
  );
}

我需要的是让它在导航时启动，因为有时需要几秒钟才能完成渲染一个复杂的页面，并在完成后停止。我发现这useNavigation真的很酷，因为它还可以自动管理表单操作和许多其他事情。

您对如何使用此钩子或其他钩子来监控导航有什么建议吗？

reactjs

1 个回答

  1. Best Answer

    路由器fallbackElement仅在应用程序路由最初加载时进行渲染，此后不再使用。

    该钩子只能在路由器内的useNavigation组件中使用。我建议创建一个根布局路由组件来呈现您的（或直接应用到调用）以及一个嵌套路由。ProgressBarHandleruseEffectNProgressOutlet

    例子：

    import { Outlet, useNavigation } from 'react-router-dom';

const ProgressBarHandler = () => {
  const navigation = useNavigation();

  useEffect(() => {
    if (navigation.state === "loading") {
      NProgress.start();
    } else {
      NProgress.done();
    }
  }, [navigation.state]);

  return null;
};

const Layout = () => (
  <>
    <ProgressBarHandler />
    <Outlet />
  </>
);

    import { Outlet, useNavigation } from 'react-router-dom';

const Layout = () => {
  const navigation = useNavigation();

  useEffect(() => {
    if (navigation.state === "loading") {
      NProgress.start();
    } else {
      NProgress.done();
    }
  }, [navigation.state]);

  return <Outlet />;
};

    仅凭这一点还不足以使加载指示器正常工作。

    获取导航操作加载指示器的技巧是：

    1. 添加路由加载器，以便navigation.state 可以实际更新"loading"状态值。这是因为加载状态仅当

      正在调用下一个路由的加载器来呈现下一页

      重点是我的。

    2. 重新验证每条路线变更。默认情况下，仅在特定条件下调用或重新验证路线加载器：

      有几种情况需要重新验证数据，从而自动保持 UI 与数据同步：

      • 通过以下方式调用操作后：
        • <Form>，<fetcher.Form>，useSubmit， 或者fetcher.submit
        • future.v7_skipActionErrorRevalidation启用该标志后，如果 返回或抛出 4xx/5xx，loaders则默认不会重新验证actionResponse
        • 您可以通过以下方式选择重新验证这些场景shouldRevalidate以及actionStatus参数
      • 当通过以下方式触发显式重新验证时useRevalidator
      • 当已渲染的路由的URL 参数发生变化时
      • 当 URL 搜索参数发生变化时
      • 当导航到与当前 URL 相同的 URL 时

      有关详细信息，请参阅shouldRevalidate。再次强调，重点是我。

    将所有这些放在一起，你会得到如下结果：

    const router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      element={<Layout />}
      shouldRevalidate={() => true} // <-- revalidate each route change
      loader={() => null}           // <-- loader to "revalidate"
    >
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </Route>
  )
);

function App() {
  return <RouterProvider router={router} />;
}
    注意：我删除了 `v7_startTransition` 未来标志，因为这似乎会干扰路线转换和您想要使用的 `NProgress` UI。此标志用于：

    这React.useTransition用于React.useState路由器状态更新。查看CHANGELOG了解更多信息。

    演示

    编辑 condescending-bose-gnlnx6
    • 1

相关问题