react react-router V6 路由切换实现过渡动画

admin管理员组

文章数量:1633991

安装

npm install @types/react-transition-group react-transition-group --save
import { CSSTransition,TransitionGroup} from ‘react-transition-group’

目录结构

引入的话，是根据你想生成动画具体文件
我这边是在Layout，里面的Outlet加的动画，具体根据自己实际情况

1. src>routers>index.tsx下新增路由配置文件

export const routers: RouteObject[] = [
    {
        path: '/',
        element: <AntLayout />,
        children: [
            {
                index: true,// 默认加载当前子项
                element: lazyLoad(<Home />)
            },
            {
                path: '/form/addform',
                element: lazyLoad(<AddForm />)
            },
            {
                path: '/form/watchform',
                element: lazyLoad(<WatchForm />)
            }
        ],
    },
    {
        path: '/login',
        element: lazyLoad(<Login />)
    }
]

启用懒加载

const lazyLoad = (children: ReactNode): ReactNode => {
    return (
        <Suspense >
            {children}
        </Suspense>
    )
}

2. App.tsx 引入配置好的路由

import { useRoutes } from 'react-router-dom';
import { routers } from './routers';
import React from 'react';
import './App.scss'

const App: React.FC = () => {
  return useRoutes(routers)
};

export default App;

3. 入口文件index.tsx 选择哈希还是history模式
   这里注意一点，react严格模式在使用过渡动画会抛错，这里就把严格模式删了

import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
    <Router>
      <App />
    </Router>
);

reportWebVitals();

4. 最后是在顶级文件AntLayout.tsx中引入过渡动画插件
   我这里是用的ant-design Layout Menu组件，官网有示例代码直接copy
   过渡动画只需要加在路由出口位置，目前v6的Outlet同vue router-view相同用法。

SwitchTransition搭配CSSTransition使用
SwitchTransition模式有两种out-in | in-out，

<Content style={{ padding: 24, margin: 0, flexGrow: 1, overflow: 'auto' }}>
     <Breadcrumb separator=">" style={{ fontSize: 14, marginBottom: 20 }}>{finalCrumbItems}</Breadcrumb>
     <SwitchTransition mode="out-in">
         <CSSTransition key={location.key} timeout={300} classNames="fade" nodeRef={null}>
             <Outlet />
         </CSSTransition>
     </SwitchTransition>
</Content>

完整一点代码

const AntLayout: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false)
    const navigate = useNavigate()
    const location = useLocation()
    const pathSnippets = location.pathname.split('/').filter(i => i)
    const breadCrumbItems = pathSnippets.map((_, index) => {
        const url = `/${pathSnippets.slice(0, index + 1).join('/')}`
        return (
            <Breadcrumb.Item key={url}>
                <Link to={url}>{pathMaps[url]}</Link>
            </Breadcrumb.Item>
        )
    })
    const finalCrumbItems = [
        <Breadcrumb.Item key="/">
            <Link to="/">首页</Link>
        </Breadcrumb.Item>
    ].concat(breadCrumbItems)
    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider
                collapsible
                collapsed={collapsed}
                onCollapse={value => setCollapsed(value)}>
                <div className="logo"></div>
                <Menu
                    theme="dark"
                    defaultSelectedKeys={['1']}
                    mode="inline"
                    onClick={handleMenuClick}
                    onSelect={({ key }) => navigate(key)}
                    items={items} />
            </Sider>
            <Layout style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
                <Header>
                    欢迎来到缅北诈骗系统
                </Header>
                <Content style={{ padding: 24, margin: 0, flexGrow: 1, overflow: 'auto' }}>
                    <Breadcrumb separator=">" style={{ fontSize: 14, marginBottom: 20 }}>{finalCrumbItems}</Breadcrumb>
                    <SwitchTransition mode="out-in">
                        <CSSTransition key={location.key} timeout={300} classNames="fade" nodeRef={null}>
                            <Outlet />
                        </CSSTransition>
                    </SwitchTransition>
                </Content>
                <Footer style={{ textAlign: 'center' }}>
                    Ant Design @2018 Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    )
}

过渡动画的样式

.fade-exit {
  opacity: 0;
  transform: translateX(50px);
}

.fade-exit-active {
  opacity: 1;
  transform: translateX(0%);
}

.fade-enter-active,
.fade-exit-active {
  transition: all 300ms;
}

参考官网样式: 过渡动画.

效果

总结

目前只是把这个动画简单实现下，仅供学习参考，还有些问题比如出现滚动条还是没解决。

本文标签： 路由动画Reactrouter