Javascript 反应到达路由器-重新加载整个树

我有以下主要课程

const MainApp = ({ children }) => {
  
  return (
    <UserProvider>
      <div className="h-screen pb-14">
        <Header />
        {children}
        <Footer />
      </div>
    </UserProvider>
  );
};

const MainApp=（{children}）=>{
返回(
{儿童}
);
};

然后我的路由器就是这样

function App() {
  return (
    <Router>
      <MainApp path="/">
        <MainPage path="/" />
        <SubtitlesPage path="subtitles" />
        <MobileAppPage path="mobileApp" />
        <SubtitlesBrowsePage path="subtitles/browse" />
        <ShopPage path="shop" />
      </MainApp>
    </Router>
  );
}

函数应用程序（）{
返回(
);
}

例如，当我从“/”导航到“/mobileApp”时，他正在重新加载整个树（页眉和页脚）

当我从“/subtitles”导航到“/subtitles/Browse”时，他不会

我的目标是，当他从“/”切换到任何其他页面时，不会重新加载页眉/页脚部分（但如果我们直接转到“/mobileApp”，他需要加载整个树）

我错过了什么

编辑好的……问题来自我的导航！我使用的是简单的标记，而不是React Router提供的标记……很好知道；）