0

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

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

侧边栏.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动画都会重新启动，我想要的行为是侧边栏只淡入一次，即使我点击一个navlink也保持固定，我试图用 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;
4

1 回答 1

1

我想我设法解决了这个问题，我所做的是通过辅助布局包装每个组件，我所做的是移动辅助布局以环绕路由组件本身，而不是围绕正在渲染的组件路线，即：<Route .... /></Route .... />

于 2021-08-21T08:17:25.297 回答