React Router v6 中避免不必要的组件重渲染：使用 useSearchParams 钩子

在 React Router v6 中，/discussions/:did/channels/:cid 路径下，当 cid 变化而 did 保持不变时，许多组件可能不需要重新获取信息。为了避免不必要的重渲染，可以使用 useSearchParams 钩子来获取和管理 URL 查询参数。

您可以根据需要在组件中使用 useEffect 钩子来监听 URL 查询参数的变化，并在参数变化时执行相应的处理逻辑。

下面是一个示例代码，演示了如何在 URL 参数变化时重新获取信息：

import { useSearchParams } from 'react-router-dom';

function MyComponent() {
  const [searchParams] = useSearchParams();

  useEffect(() => {
    // 在 did 和 cid 变化时触发重新获取信息的逻辑
    // 假设这里是获取信息的异步请求
    const fetchData = async () => {
      // 根据 searchParams 获取 URL 参数的值
      const did = searchParams.get('did');
      const cid = searchParams.get('cid');
      
      // 执行获取信息的逻辑
      // ...
    };

    fetchData();
  }, [searchParams]);

  return (
    // 组件的内容
  );
}

在这个示例中，useSearchParams 钩子返回一个 URLSearchParams 对象，它可以用于获取和管理 URL 查询参数。我们使用 searchParams 来监听 URL 查询参数的变化，并在 useEffect 中执行重新获取信息的逻辑。

当 URL 参数 did 和 cid 变化时，useEffect 会重新执行获取信息的逻辑。这样，即使 did 不变，cid 变化时也可以避免重新获取信息。

希望这可以帮助到你！