如何使用React JS创建基于URL参数的标签页筛选功能

核心逻辑 #

通过URL查询参数（如?tabs=left）存储标签页状态，利用React Router的useSearchParams钩子或ahooks的useUrlState读写参数，实现刷新页面后保持标签页状态同步。

代码修改方案 #

方案一：使用React Router原生useSearchParams #

import React, { useEffect, useState } from "react";
import "./App.css";
import { useSearchParams } from "react-router-dom";

export default function App() {
  // 操作URL查询参数的钩子
  const [searchParams, setSearchParams] = useSearchParams();
  const [activeTab, setActiveTab] = useState(0);

  const tabData = [
    {
      title: "left",
      content: "loremleft",
    },
    {
      title: "right",
      content: "loremright",
    },
  ];

  // 初始化：从URL读取tabs参数，匹配对应标签
  useEffect(() => {
    const tabParam = searchParams.get("tabs");
    if (tabParam) {
      const targetIndex = tabData.findIndex(tab => tab.title === tabParam);
      if (targetIndex !== -1) setActiveTab(targetIndex);
    }
  }, [searchParams, tabData]);

  // 点击标签时同步更新URL和本地状态
  const handleTabClick = (index) => {
    const selectedTab = tabData[index];
    setSearchParams({ tabs: selectedTab.title });
    setActiveTab(index);
  };

  return (
    <div>
      <div style={{ display: "flex", margin: "5px", justifyContent: "center" }}>
        {tabData.map((tab, idx) => (
          <button
            key={idx}
            className={activeTab === idx ? "active" : ""}
            style={{ margin: "5px", padding: "8px 16px", cursor: "pointer" }}
            onClick={() => handleTabClick(idx)}
          >
            {tab.title}
          </button>
        ))}
      </div>

      <div style={{ padding: "16px", textAlign: "center" }}>
        {tabData[activeTab].content}
      </div>
    </div>
  );
}

关键说明

• useSearchParams：React Router v6提供的钩子，直接读写URL查询参数，返回的setSearchParams方法会自动更新URL。
• 初始化同步：通过useEffect在组件挂载时读取URL中的tabs参数，匹配对应标签并设置状态。
• 样式补充：在App.css中添加激活标签样式：

.active {
  border-bottom: 2px solid blue;
  font-weight: bold;
}

方案二：使用ahooks的useUrlState（简化版） #

如果想减少手动同步逻辑，可以直接用@ahooksjs/use-url-state封装好的能力：

import React from "react";
import "./App.css";
import useUrlState from "@ahooksjs/use-url-state";

export default function App() {
  // 自动同步URL参数与组件状态，默认值为"left"
  const [urlState, setUrlState] = useUrlState({ tabs: "left" });
  const tabData = [
    {
      title: "left",
      content: "loremleft",
    },
    {
      title: "right",
      content: "loremright",
    },
  ];

  const activeTabIndex = tabData.findIndex(tab => tab.title === urlState.tabs);

  const handleTabClick = (tabTitle) => {
    setUrlState({ tabs: tabTitle });
  };

  return (
    <div>
      <div style={{ display: "flex", margin: "5px", justifyContent: "center" }}>
        {tabData.map((tab, idx) => (
          <button
            key={idx}
            className={activeTabIndex === idx ? "active" : ""}
            style={{ margin: "5px", padding: "8px 16px", cursor: "pointer" }}
            onClick={() => handleTabClick(tab.title)}
          >
            {tab.title}
          </button>
        ))}
      </div>

      <div style={{ padding: "16px", textAlign: "center" }}>
        {tabData[activeTabIndex].content}
      </div>
    </div>
  );
}

这个方案无需手动处理useEffect，useUrlState会自动完成URL参数与组件状态的双向同步。

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