ReactJS v18 Router v6 自定义 Tab 动画 - 实现流畅滑动切换

要实现从前一个选择的tab滑动到当前选择的tab的动画效果，可以使用React Router v6的useLocation和useEffect钩子来监听URL的变化，并根据选择的tab的变化来控制动画效果。

首先，创建一个自定义的Tabs组件，其中包含三个Tab选项，并为每个选项设置对应的URL。例如：

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

function Tabs() {
  return (
    <div>
      <Link to='/tab1'>Tab 1</Link>
      <Link to='/tab2'>Tab 2</Link>
      <Link to='/tab3'>Tab 3</Link>
    </div>
  );
}

export default Tabs;

然后，在使用Tabs组件的父组件中，使用useLocation钩子来监听URL的变化，并根据选择的tab的变化来控制动画效果。例如：

import { useLocation } from 'react-router-dom';
import { useEffect, useState } from 'react';

function App() {
  const location = useLocation();
  const [currentTab, setCurrentTab] = useState(1);

  useEffect(() => {
    const currentTab = getCurrentTabFromLocation(location);
    setCurrentTab(currentTab);
  }, [location]);

  const getCurrentTabFromLocation = (location) => {
    const path = location.pathname;
    const tab = path.substring(4); // Assuming the path is '/tabX'
    return parseInt(tab);
  };

  return (
    <div>
      <Tabs />
      {/* 在这里根据currentTab的值来添加滑动动画效果 */}    </div>
  );
}

export default App;

在上述代码中，我们使用useEffect钩子来监听URL的变化。当URL发生变化时，我们从URL中解析出当前选择的tab，并将其设置为currentTab的值。

最后，在App组件中根据currentTab的值来添加滑动动画效果。你可以使用CSS动画库（如react-spring或framer-motion）来实现滑动效果，或者使用CSS过渡和动画属性来自定义滑动动画。具体的实现方式取决于你选择的动画库或自定义的CSS样式。

请注意，上述代码中的URL解析假设tab的路径格式为/tabX，其中X是tab的序号。你可以根据实际情况调整这部分代码以适应你的URL结构。

希望以上内容对你有所帮助！