React路由问题：从Manga页跳转Read页时保留Comments组件不卸载

要实现从Manga页面跳转到Read页面时不卸载Comments组件，核心思路是将Comments组件提升到Manga和Read页面的共同父路由组件中，利用React Router的布局路由特性，让父组件在页面跳转时保持挂载，从而保留Comments组件的状态。

1. 创建共享布局组件 #

新建一个布局组件（比如MangaReadLayout.jsx），在其中渲染Outlet（用于显示Manga/Read子组件）和Comments组件：

import { Outlet, useLocation } from 'react-router-dom';

const MangaReadLayout = () => {
  const location = useLocation();
  // 从路由state中获取漫画ID（跳转时传入）
  const mangaId = location.state?.id;

  return (
    <div>
      {/* Outlet会渲染当前匹配的子路由组件（Manga或Read） */}
      <Outlet />
      {/* 渲染Comments组件，保持挂载状态 */}
      {mangaId && (
        <div className="md:px-[2rem] px-4 md:mt-[6rem]">
          <Comments mangaId={mangaId} />
        </div>
      )}
    </div>
  );
};

export default MangaReadLayout;

2. 修改路由配置 #

调整App.js中的路由，将/manga/:slug和/read/:slug作为共享布局的子路由：

import { Routes, Route } from 'react-router-dom';
import MangaReadLayout from './MangaReadLayout';

// ...其他组件导入

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dmall />} />
      <Route path="/search/:name" element={<Filter />} />
      {/* 共享布局路由：包裹Manga和Read页面 */}
      <Route element={<MangaReadLayout />}>
        <Route path="/manga/:slug" element={<Manga />} />
        <Route path="/read/:slug" element={<Read />} />
      </Route>
      <Route path="/all" element={<ViewAll />} />
      <Route path="/top" element={<Top />} />
    </Routes>
  );
}

export default App;

3. 调整跳转逻辑并移除组件内的Comments #

• 在Manga组件中，修改跳转的Link，直接使用正确的路由路径传递参数和state，不再用window.location.href.replace：

<Link 
  className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-center" 
  to={`/read/${manga.slug}`} 
  state={{ pages: manga.pages, id: manga.id }}
>
  Read Now
</Link>

• 移除Manga和Read组件内原本渲染的Comments代码，因为现在Comments已经在共享布局中统一渲染。

原理说明 #

当从/manga/:slug跳转到/read/:slug时，共享布局组件MangaReadLayout不会被卸载，只会替换Outlet内的子组件（Manga→Read），因此布局中的Comments组件会持续挂载，状态得以保留。

内容的提问来源于stack exchange，提问作者moik gfdxz