React Router v6 自定义 Tabs 组件：记忆上一个 Tab 位置

在 React Router v6 中，可以使用 'useSearchParams' 钩子和 'useEffect' 钩子来记住当前选择的tab的上一个tab的位置。

首先，确保你已经安装了 'react-router-dom@6' 和 'query-string'。

接下来，创建一个自定义的Tabs组件，其中使用了 'useSearchParams' 钩子来获取URL中的查询参数，并且使用 'useEffect' 钩子来在查询参数发生变化时更新上一个tab的位置。代码示例如下：

import { useSearchParams } from 'react-router-dom';
import queryString from 'query-string';

const Tabs = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  // 获取查询参数中的tab值
  const currentTab = searchParams.get('tab');
  const previousTab = React.useRef(null);

  // 在查询参数发生变化时更新上一个tab的位置
  React.useEffect(() => {
    previousTab.current = currentTab;
  }, [currentTab]);

  // 处理tab切换事件
  const handleTabChange = (tab) => {
    // 更新查询参数中的tab值
    setSearchParams({ tab });
  };

  return (
    <div>
      <button onClick={() => handleTabChange('tab1')}>Tab 1</button>
      <button onClick={() => handleTabChange('tab2')}>Tab 2</button>
      <button onClick={() => handleTabChange('tab3')}>Tab 3</button>
      <p>Current Tab: {currentTab}</p>
      <p>Previous Tab: {previousTab.current}</p>
    </div>
  );
};

export default Tabs;

在上面的代码中，我们使用了三个按钮来表示不同的tab，当点击按钮时，调用 'handleTabChange' 函数来更新查询参数中的tab值。同时，我们在页面中显示当前tab和上一个tab的位置。

这样，每次切换tab时，上一个tab的位置就会被记住，并且可以通过 'previousTab.current' 来获取它。