当前位置：首页 > React

react如何记录页面访问次数

2026-01-25 04:47:15React

记录页面访问次数的方法

使用 `useEffect` 和本地存储

在 React 中，可以通过 useEffect 钩子结合 localStorage 或 sessionStorage 记录页面访问次数。每次组件加载时，更新存储中的计数。

import React, { useEffect, useState } from 'react';

function PageViewCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const storedCount = localStorage.getItem('pageViewCount');
    const initialCount = storedCount ? parseInt(storedCount) : 0;
    const newCount = initialCount + 1;
    localStorage.setItem('pageViewCount', newCount.toString());
    setCount(newCount);
  }, []);

  return <div>页面访问次数: {count}</div>;
}

export default PageViewCounter;

使用后端 API 记录

如果需要更精确的统计（避免本地存储被清除），可以调用后端 API 记录访问次数。

import React, { useEffect, useState } from 'react';

function PageViewCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    fetch('/api/page-view', { method: 'POST' })
      .then(response => response.json())
      .then(data => setCount(data.count));
  }, []);

  return <div>页面访问次数: {count}</div>;
}

export default PageViewCounter;

使用第三方工具

集成第三方分析工具（如 Google Analytics、Matomo）可以更全面地跟踪页面访问。以 Google Analytics 为例：

react如何记录页面访问次数

import React, { useEffect } from 'react';
import ReactGA from 'react-ga';

function PageViewCounter() {
  useEffect(() => {
    ReactGA.initialize('YOUR_TRACKING_ID');
    ReactGA.pageview(window.location.pathname);
  }, []);

  return <div>页面访问已记录</div>;
}

export default PageViewCounter;