子路由中的导航是否重新呈现包含<Outlet />子所在的父元素？

Question

我有三个组件，父组件 TeamIndex 和两个子组件，Account 和 Dashboard 路由是 /team、/team/account 和 /team/dashboard

app
├── root.tsx
└── routes
    └── TeamIndex
        ├── Account
        ├── Dashboard
        └── ...other pages

TeamIndex 在屏幕左侧包含一个可扩展的导航栏，其中包含一些指向帐户和仪表板的链接，以及一个用于其余部分的。

团队指数：

const TeamNav = () => {

    const [expanded, setExpanded] = useState(false)

    function toggleExpand(){setExpanded(!expanded)}

    return (
        <>
            <ExpandableNavBar style=`${expanded ? "w-1/6" : "w-[80px]"}` >
                <div onClick={toggleExpand}>Show/Hide</div>
                <a href="/team/account/">Account</a>
                <a href="/team/dashboard/">Dashboard</a>
            </ExpandableNavBar>
            <Outlet />
        </>
    )
}

仪表板：

const TeamDashboard = () => {
    return (
        <div>
            <PageHeader /> <-- this contains the menu with a link to /team/account
            <DashboardContents />
        </div>
    )
}

账号：

const TeamAccount = () => {
    return (
        <div>
            <PageHeader /> <-- this contains the menu with a link to /team/account
            <AccountContents />
        </div>
    )
}

页眉：

const PageHeader = () => {
    return (
        <div>
            <h1>{pageName}</h1>
            <div>
                <Link to="/team/account" >
                    <p>Account</p>
                </Link>
            //...other links
            </div>
        </div>
    )
}

两个子项都包含一个页眉，该页眉具有一个链接到帐户路径的菜单

根据我在文档中的理解，每当导航（例如，从 /team/dashboard-> /team/account）发生在子路由（Dashboard 中的菜单）中时，包含 的父路由不应重新呈现，只有孩子应该改变。相反，如果导航发生在 组件之外（例如，在屏幕左侧的导航栏中），父级显然会重新呈现。

我说的对吗？这就是我正在观察的。

如果我展开导航，并使用导航链接从仪表板转到帐户，整个页面将重新加载，导航栏将关闭。

如果我扩展了导航，并使用菜单链接从仪表板转到帐户，只有 被重新加载并且导航栏保持打开状态。

有趣的是，我有相同的设置（带有侧边栏导航链接的父项和一个 ）来查看特定的玩家资料，但是当单击带有 /team 导航栏展开的链接时，所有内容都会重新呈现，/team nav，/team/player nav，以及/team/player/$playerID玩家数据展示元素

我的问题最终是，如何制作一个在单击其中的链接时不会重新呈现的导航栏？这是使用 React 保持状态的副作用吗？我目前的解决方案是设置一个带有“扩展”或其他内容的 cookie（这对我来说似乎很愚蠢），或者创建一个导航组件并将其与页眉一起粘贴到每个页面中。组件解决方案似乎会遇到完全相同的问题，在每次导航时重新呈现自身，或者至少将其状态重置为“关闭”。我想也许可以使用 useOutletContext 钩子并以这种方式传递扩展状态，但是如果父路由一直在重新渲染，useState 将自行重置并且会发生同样的问题。

我目前有上述设置，只有在使用 Pageheader 中的链接时才能正常工作（导航栏不会在导航时缩回），而不是导航栏中的链接