防止react在路由更改时重新启动css动画

Question

在我的react应用程序中，有一个名为SecondaryLayout.js的文件

const SecondaryLayout = ({children, className, ...rest}) => {
    
    return (
        <>
            <Sidebar />
            <main className={['seconday_layout__container', className].join('')} {...rest}>
                {children}
            </main>
        </>
    );
};

Sidebar.js：

const Sidebar = () => {
    const {user} = useSelector(state => state.auth);
    return (
        <div className="bg-white py-4 px-2 fixed h-screen shadow-lg secondary_layout__sidebar">
            <div className="h-full flex flex-col justify-between items-center">
                <Link to="/"><h1 className="font-pacifico text-white px-2.5 py-1 bg-blue-700 rounded-full text-xl -mb-5">P</h1></Link>
                <div className="flex flex-col space-y-2">
                    <NavLink to="/user/dashboard" className="px-2.5 py-1.5 rounded-lg shadow-md" activeClassName="bg-blue-700 shadow-lg text-white"><TemplateIcon className="inline w-4 h-4 -mt-1"/></NavLink>
                    <NavLink to="/user/listings" className="px-2.5 py-1.5 rounded-lg shadow-md" activeClassName="bg-blue-700 shadow-lg text-white"><ViewListIcon className="inline w-4 h-4 -mt-1"/></NavLink>
                    <NavLink to="/user/address" className="px-2.5 py-1.5 rounded-lg shadow-md" activeClassName="bg-blue-700 shadow-lg text-white"><LocationMarkerIcon className="inline w-4 h-4 -mt-1"/></NavLink>
                    <NavLink to="/user/profile" className="px-2.5 py-1.5 rounded-lg shadow-md" activeClassName="bg-blue-700 shadow-lg text-white"><CogIcon className="inline w-4 h-4 -mt-1"/></NavLink>
                </div>
                <Avatar name={user.username} image={user.image} />
            </div>
        </div>
    );
};

侧边栏有一个css动画和3个NavLinks，每次我点击一个链接，css动画就会重新启动，我想要的行为是侧边栏只淡入一次，并且即使我点击导航链接也会保持固定，我试图用React.memo()包装我的侧边栏组件，但这并没有解决这个问题

编辑:假设用户导航到/ user /dashboard或/user/profile，所有这些路由都应该始终呈现侧边栏

示例Dashboard.js

import React from 'react';

import { Helmet } from 'react-helmet';

import SecondaryLayout from '../../layouts/SecondaryLayout';

const Dashboard = () => {
    return (
        <SecondaryLayout>
            <Helmet>
                <title>My Dashboard</title>
            </Helmet>
            Dashboard
        </SecondaryLayout>
    );
};

export default Dashboard;

Answer 1

我想我设法解决了这个问题，我所做的是通过二级布局来包装每个组件，我所做的是移动二级布局来包裹路由组件本身，而不是路由所呈现的组件，即：< route .../>