reactjs v18 一个page的url为 discussions1channels1 这个page下有一个discussionInfo展示当前discussion的概览信息以及一个 tabs 来展示所有的 channles用户点击channels就会切换 例如：discussions1channels2但是每次切换channels的时候会出现2个情况第一个是 discussionInfo 和

这个问题可以通过使用 React Router 的 useParams 钩子来解决。

首先，确保你的路由设置正确，可以根据 discussionId 和 channelId 来匹配路由。例如：

<Route path="/discussions/:discussionId/channels/:channelId" component={DiscussionPage} />

然后，在 DiscussionPage 组件中，使用 useParams 钩子来获取当前的 discussionId 和 channelId。例如：

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

const DiscussionPage = () => {
  const { discussionId, channelId } = useParams();

  // 根据 discussionId 和 channelId 获取 discussionInfo 和 channels 的逻辑

  return (
    <div>
      {/* 显示 discussionInfo 和 channels */}
    </div>
  );
};

这样，当用户切换 channels 时，discussionInfo 和 channels 不会重新从服务器获取，而是根据新的 channelId 进行更新。

至于滑动的问题，你可以使用 useEffect 钩子来监听 channelId 的变化，并在变化时执行滑动的逻辑。例如：

import { useRef, useEffect } from 'react';

const DiscussionPage = () => {
  const { discussionId, channelId } = useParams();
  const tabsRef = useRef(null);

  useEffect(() => {
    // 执行滑动逻辑，将选中的 tabs 滑动到可视区域
    if (tabsRef.current) {
      tabsRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }, [channelId]);

  // 根据 discussionId 和 channelId 获取 discussionInfo 和 channels 的逻辑

  return (
    <div>
      <div ref={tabsRef}>
        {/* 显示 tabs */}
      </div>
      <div>
        {/* 显示 discussionInfo */}
      </div>
    </div>
  );
};

这样，每当 channelId 变化时，tabs 就会滑动到选中的位置。

希望这些代码能帮助到你解决问题