如何在 React 应用程序中启用 Vercel Web 分析

Question

我正在尝试在我的项目中添加分析，但我不知道必须在哪个文件中添加代码，

就像每个人都说的：在你的应用程序中添加这行代码，但问题是哪个是React中的根文件以及如何启用vercel分析

import { Analytics } from '@vercel/analytics/react';

<Analytics />

____

但我不知道在哪里添加，请帮助我，因为我是新来的。

我想在我的 React Web 应用程序中启用 Vercel Web 分析。

Answer 1

我认为这对你的项目有用。

main.jsx

import { Analytics } from '@vercel/analytics/react';

ReactDOM.createRoot(document.getElementById("root")).render(
  <>
    <Analytics />
    <App />
  </>
);

但是如果不起作用，那么您的项目中可能有路线，那么您必须将分析放在每个路线中，或者将分析标签放在公共组件中，该组件每次都会在每个路线中呈现。

App.jsx

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <Suspense fallback={<Loading />}>
        <Home />
      </Suspense>
    ),
  },
  {
    path: "/movies",
    element: (
      <Suspense fallback={<Loading />}>
        <Movies />
      </Suspense>
    ),
  },
  {
    path: "/series",
    element: (
      <Suspense fallback={<Loading />}>
        <Series />
      </Suspense>
    ),
  },
  {
    path: "/anime",
    element: (
      <Suspense fallback={<Loading />}>
        <Anime />
      </Suspense>
    ),
  },
  {
    path: "/kids",
    element: (
      <Suspense fallback={<Loading />}>
        <Kids />
      </Suspense>
    ),
  },
  {
    path: "/collection",
    element: (
      <Suspense fallback={<Loading />}>
        <Collection />
      </Suspense>
    ),
  },
  {
    path: "/search/:type/:query",
    element: (
      <Suspense fallback={<Loading />}>
        <Search />
      </Suspense>
    ),
  },
  {
    path: "/:type/:id",
    element: (
      <Suspense fallback={<Loading />}>
        <Detail />
      </Suspense>
    ),
  },
  {
    path: "/stream/:type/:id/season?/:season?/episode?/:episode?",
    element: (
      <Suspense fallback={<Loading />}>
        <Stream />
      </Suspense>
    ),
  },
]);

const App = () => {
  return <RouterProvider router={router} />;
};

export default App;

在此示例中，我有一些路线，每个路线都有一个呈现的页面。 每个页面我都有一个仪表板组件。

Stream.jsx

export const Stream = () => {
  return (
    <DashboardLayout>
      ...
    </DashboardLayout>
  );
};

所以我能做的就是将 Analytics 标签放入

DashboardLayout

组件中。

DashboardLayout.jsx

import { Analytics } from '@vercel/analytics/react';

const DashboardLayout = ({ children }) => {
  return (
    <div className="min-h-screen w-full">
      <SideBarContainer />
      <Analytics />
      <div className="h-full transition-all duration-300">
        {children}
        <Footer />
      </div>
    </div>
  );
};

请务必记住，您应该在 DOM 上呈现分析组件；这意味着您只能将分析放在根文件上是不正确的。只要它在 DOM 上渲染，你可以把它放在任何地方，它都会正常运行。