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

你遇到的核心误解是BrowserRouter并非只能将Routes作为子组件，它可以接受任意React元素作为子节点，只要这些元素处于Router的上下文范围内，就能正常使用useLocation这类React Router钩子。下面提供两种可行的解决方案：

方案一：将PostHogIdentifier作为Routes的同级组件放入BrowserRouter #

直接在BrowserRouter内部同时放置PostHogIdentifier和Routes组件，这样PostHogIdentifier就能处于Router上下文内，正常监听路由变化：

修改后的路由配置代码：

ReactDOM.createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Providers>
      <BrowserRouter>
        {/* 在这里放置PostHogIdentifier，和Routes同级 */}
        <PostHogIdentifier />
        <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>,
);

方案二：通过全局布局组件包裹所有路由 #

如果希望更规整地组织代码，可以创建一个全局布局组件，将PostHogIdentifier集成进去，然后让所有路由都继承这个布局：

1. 先创建全局布局组件：

function GlobalLayout({ children }) {
  return (
    <>
      <PostHogIdentifier />
      {children}
    </>
  );
}

2. 修改路由配置，用GlobalLayout作为最顶层路由的element：

ReactDOM.createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Providers>
      <BrowserRouter>
        <Routes>
          {/* 用GlobalLayout包裹所有路由 */}
          <Route element={<GlobalLayout />}>
            <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" />}
            />
          </Route>
        </Routes>
      </BrowserRouter>
    </Providers>
  </StrictMode>,
);

另外可以优化你的PostHogIdentifier组件，直接使用location对象提供的属性代替window.location.href，更符合React Router的使用规范：

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

  useEffect(() => {
    if (posthog) {
      console.log("Capturing pageview", location.href);
      posthog.capture(
        '$pageview',
        {
          '$current_url': location.href,
          'pathname': location.pathname, // 额外捕获路径信息，方便后续分析
        }
      )
    }
  }, [location])
  
  return null;
}

内容的提问来源于stack exchange，提问作者Foobar