1

我有以下主要课程

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

然后我的路由器是这样的

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 提供的……很高兴知道；）

4

0 回答 0