Javascript 如何在不卸载React JS中的前一个组件的情况下在单独的组件中打开路由？

我目前正在使用React JS和React router开发一个食谱网站

在主页中，我有一个卡片网格，每张卡片都是食谱的预览

每张卡都用

标签包装。单击其中一张卡，我想打开另一个页面（由于react router，URL会发生变化，链接到特定路由的组件也会打开）。在这个新组件上，我展示了配方的所有细节

我的问题是： 当我在详细信息页面上并单击导航器的“previous”（上一页）按钮时，我的网格组件和所有配方都将再次装载。这是一个问题，因为：

• 我不想再拿所有的食谱了
• 在单击食谱之前，我将失去滚动级别

我已经考虑过如何实现一个模式，当我点击一张配方卡时，它会出现在屏幕上，并显示有关配方的所有细节（我尝试过用一个简单的div和onClick操作更改每张卡片的包装标签）。此模式位于网格组件之上，因此我不会丢失网格中的滚动级别，也不需要重新获取所有数据。但有了这个解决方案，我就失去了所有的导航功能（不能用导航器的“previous”按钮返回，URL只能人工修改…）

有人能解决这种情况吗

我关注的路线：

  return (
    <ErrorBoundary>
      <Suspense fallback={<LoadingPage />}>
        <Switch>
          <Route exact path="/">
            <HomePage />  // recipes grid page
          </Route>
          <Route path="/recette/:id">
            <RecipeDetailPage />  // recipe details page
          </Route>
          <Route path="/not-found">
            <NotFoundPage />
          </Route>
          <Redirect to="/not-found" />
        </Switch>
      </Suspense>
    </ErrorBoundary>
  );
};

<Link className="RecipeCard__wrapper" to={`/recette/${recipe._id}`}>
// ... card datas
</Link>

返回(
//配方网格页面
//配方详细信息页面
);
};

我的配方卡组件（它们位于我的网格组件中，可单击）：

  return (
    <ErrorBoundary>
      <Suspense fallback={<LoadingPage />}>
        <Switch>
          <Route exact path="/">
            <HomePage />  // recipes grid page
          </Route>
          <Route path="/recette/:id">
            <RecipeDetailPage />  // recipe details page
          </Route>
          <Route path="/not-found">
            <NotFoundPage />
          </Route>
          <Redirect to="/not-found" />
        </Switch>
      </Suspense>
    </ErrorBoundary>
  );
};

<Link className="RecipeCard__wrapper" to={`/recette/${recipe._id}`}>
// ... card datas
</Link>

// ... 卡片数据

我的食谱详细信息页面： 我在URL中检查配方的id，然后获取相应的配方。经典的反应成分，没什么特别的

---

谢谢

不要使用

exact

，它将不会卸载。