如何使用Posthog通过React Router捕获页面浏览事件？

Question

我有以下使用 React 路由器的 SPA：

ReactDOM.createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Providers>
      <BrowserRouter>
        <Routes>
          <Route element={<ProtectedRoutes />}>
            <Route path="/dashboard" element={<MainPage />} />
            <Route path="/dashboard/setup" element={<SetupPage />} />
            <Route path="/dashboard/project/:projectId" element={<ProjectPage />} />
          </Route>
          <Route path="/admin" element={<ProtectedRoutes admin />}>
            <Route path="" element={<div>you are admin</div>} />
            <Route path="users" element={<UsersPage />} />
            <Route path="data/view" element={<DataViewPage />} />
            <Route path="tasks" element={<TasksPage />} />
          </Route>
          <Route element={<PublicOnlyRoutes redirectTo="/dashboard?redirect=true" />}>
            <Route path="/login" element={<LoginPage />} />
          </Route>
          <Route path="/" element={<HomePage />} />
          <Route
            path="/demo"
            element={<DemoComponent message="Sample message" name="User" />}
          />
        </Routes>
      </BrowserRouter>
    </Providers>
  </StrictMode>,
);

我想使用 Posthog 的事件捕获来跟踪用户何时在应用程序中导航。像这样：

function PostHogIdentifier() {
  const location = useLocation();

  // Track pageviews
  useEffect(() => {
    if (posthog) {
      console.log("Capturing pageview", window.location.href);
      posthog.capture(
        '$pageview',
        {
          '$current_url': window.location.href,
        }
      )
    }
  }, [location])
  
  return null;
}

但是，我不能这样做，因为

useLocation

钩子必须在 BrowserRouter 的

inside

运行。我不知道如何做到这一点，因为

BrowserRouter

仅支持

Route

和

Routes

子组件。

有人可以帮忙吗？

Answer 1

但是，我不能这样做，因为

useLocation

钩子必须在内部运行 的

BrowserRouter

。

这是真的，

useLocation

钩子只能在路由上下文中渲染的组件中调用。

我不知道该怎么做，因为只有

BrowserRouter

支持

Route

和

Routes

子组件。

这是不正确的，

BrowserRouter

可以将任何东西渲染为子组件，

Route

和

React.Fragment

组件是

Routes

组件唯一有效的子组件。

PostHogIdentifier

只需要在

BrowserRouter

创建的 ReactTree 中渲染，即它只需要渲染为后代。

示例：

ReactDOM.createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Providers>
      <BrowserRouter>
        <PostHogIdentifier /> {/* <-- rendered within routing context */}
        <Routes>
          <Route element={<ProtectedRoutes />}>
            <Route path="/dashboard" element={<MainPage />} />
            <Route path="/dashboard/setup" element={<SetupPage />} />
            <Route path="/dashboard/project/:projectId" element={<ProjectPage />} />
          </Route>
          <Route path="/admin" element={<ProtectedRoutes admin />}>
            <Route path="" element={<div>you are admin</div>} />
            <Route path="users" element={<UsersPage />} />
            <Route path="data/view" element={<DataViewPage />} />
            <Route path="tasks" element={<TasksPage />} />
          </Route>
          <Route element={<PublicOnlyRoutes redirectTo="/dashboard?redirect=true" />}>
            <Route path="/login" element={<LoginPage />} />
          </Route>
          <Route path="/" element={<HomePage />} />
          <Route
            path="/demo"
            element={<DemoComponent message="Sample message" name="User" />}
          />
        </Routes>
      </BrowserRouter>
    </Providers>
  </StrictMode>,
);