React中如何修改URL且不触发应用重渲染？

核心思路 #

1. 分离数据获取与标签切换逻辑：仅在组件首次挂载时一次性获取所有标签页的数据，避免路由参数变化时重复请求。
2. 监听路由参数变化：当URL中的tab参数改变时，仅切换当前标签的配置状态，不重新拉取数据。

具体实现步骤 #

1. 调整数据获取的useEffect #

将获取所有标签数据的逻辑放在仅首次挂载执行的useEffect中，同时初始化当前路由对应的标签配置：

import { useEffect, useState } from 'react';

const MonitoringPage = (props) => {
  const [allTabs, setAllTabs] = useState([]);
  const [settings, setSettings] = useState({});
  const { tab: currentTab } = props.match.params;

  // 首次挂载时获取所有标签数据，并初始化当前标签配置
  useEffect(() => {
    // 替换为实际的接口请求逻辑
    const fetchAllTabsData = async () => {
      const response = await fetch('/api/monitoring/tabs');
      const data = await response.json();
      setAllTabs(data);

      // 根据当前路由的tab参数设置初始配置
      const initialTab = data.find(tab => tab.settings.name === currentTab);
      if (initialTab) {
        setSettings(initialTab.settings);
      }
    };

    fetchAllTabsData();
  }, []); // 空依赖数组确保仅执行一次

2. 监听路由参数变化，更新标签配置 #

添加另一个useEffect，专门监听URL中tab参数的变化，切换对应的标签配置：

// 监听路由tab参数变化，更新当前标签配置
  useEffect(() => {
    const targetTab = allTabs.find(tab => tab.settings.name === currentTab);
    if (targetTab) {
      setSettings(targetTab.settings);
    }
  }, [currentTab, allTabs]); // 依赖currentTab和allTabs，确保数据加载完成后执行

3. 优化标签切换函数 #

调整onChangeTab，只需修改路由URL即可，无需手动设置settings（路由变化会触发上面的useEffect自动更新状态）：

const onChangeTab = (tabName) => {
    const tab = allTabs.find(tab => tab.name === tabName);
    if (tab) {
      // 跳转到对应路由，确保路径与路由配置匹配
      props.history.push(`/settings/monitoring/${tab.settings.name}`);
    }
  };

  // 组件渲染逻辑...
};

4. 支持直接通过URL访问标签页 #

由于我们在首次挂载时会根据URL中的tab参数初始化对应的标签配置，直接访问/settings/monitoring/xxx时，组件会自动加载对应标签的配置，无需额外处理。

额外注意事项 #

• 确保标签匹配逻辑（示例中的allTabs.find）能正确根据路由参数找到对应的标签数据。
• 如果标签数据可能在组件生命周期内更新（比如后台修改了标签配置），可以给第一个useEffect添加合适的依赖（比如一个刷新状态变量），按需重新获取数据。

内容的提问来源于stack exchange，提问作者Никита Гончаров