使用 React Router Dom Link 重置状态的正确方法

使用 React Router Dom 的 Link 组件时，可通过 useEffect 或 useMemo Hook 监听 URL 参数变化并重置组件状态，避免状态残留。 具体方法如下：

useEffect 适用于需要执行副作用操作的场景（如状态更新、网络请求）。通过监听 URL 参数（如 categories），在参数变化时强制重置组件状态。

• 示例代码：

  import { useState, useEffect } from 'react';import { useSearchParams } from 'react-router-dom';function Filters({ uniqueCategories }) { const [queryParams, setQueryParams] = useSearchParams(); const categories = queryParams.get('categories'); const [selectedCategories, setSelectedCategories] = useState(categories?.split(',') ?? []); useEffect(() => { setSelectedCategories(categories?.split(',') ?? []); }, [categories]); // 依赖 categories 变化 const handleCategories = (category) => { if (selectedCategories.includes(category)) { setSelectedCategories(selectedCategories.filter((c) => c !== category)); } else { setSelectedCategories([...selectedCategories, category]); } }; return ( <div> {uniqueCategories.map((category, index) => ( <div key={index} className="filter-type"> <input type="checkbox" checked={selectedCategories.includes(category)} onChange={() => handleCategories(category)} /> <div className="filter-item">{category}</div> </div> ))} </div> );}

• 关键点：

  useEffect 监听 categories 变化，当 URL 参数更新时，重置 selectedCategories 状态。

  适用于需要执行副作用（如状态更新）的场景。

useMemo 适用于仅需根据现有数据计算的场景（如派生状态）。通过缓存 selectedCategories 的计算结果，在 categories 变化时自动更新。

• 示例代码：

  import { useMemo } from 'react';import { useSearchParams } from 'react-router-dom';function Filters({ uniqueCategories }) { const [queryParams, setQueryParams] = useSearchParams(); const categories = queryParams.get('categories'); const selectedCategories = useMemo(() => { return categories?.split(',') ?? []; }, [categories]); // 依赖 categories 变化 // ... 其他代码（如 handleCategories）}

• 关键点：

  useMemo 监听 categories 变化，重新计算 selectedCategories 并触发组件重新渲染。

  适用于纯计算场景，代码更简洁高效。

• 优先使用 useEffect：

  当状态更新涉及副作用（如网络请求、DOM 操作）时。

  需要更灵活的控制逻辑（如条件更新）。

• 优先使用 useMemo：

  当状态更新仅为派生计算（如基于 URL 参数的简单转换）。

  需要优化性能（避免不必要的重新计算）。

• 依赖项完整性：确保将所有相关 URL 参数作为 useEffect 或 useMemo 的依赖项，避免遗漏导致状态未更新。
• 避免冗余计算：在 useEffect 或 useMemo 中仅执行必要的操作，减少性能开销。
• 多参数处理：若状态依赖多个 URL 参数，将它们全部列入依赖项（如 [param1, param2]）。

• 问题根源：React 组件状态默认不会因 URL 变化自动重置，导致状态残留。
• 解决方案：

  useEffect：监听 URL 参数变化，执行副作用操作（如状态更新）。

  useMemo：监听 URL 参数变化，缓存派生状态（如基于参数的计算）。

• 选择依据：根据是否需要副作用操作决定使用 useEffect 或 useMemo。
• 效果：确保组件状态与 URL 参数同步，避免导航后状态不一致的问题。

通过合理使用 useEffect 或 useMemo，可高效解决 React Router Dom 中 Link 组件导航时的状态重置问题，提升应用稳定性和用户体验。