react-router-dom中Outlet失效：导航组件无法持久渲染问题排查

你的问题出在路由结构上：当前Navigation、Home、Shop是同级路由，访问根路径或/shop时只会渲染对应组件，不会同时显示Navigation。Outlet组件需要配合嵌套路由才能生效，用来渲染父路由下的子路由内容。

修改后的代码如下：

import Home from "./Routes/Home/Home.component";
import { Routes, Route, Outlet } from "react-router-dom";

const Navigation = () => {
  return (
    <div>
      <div>
        <h1>Hello I am Navigation!!!</h1>
      </div>
      <Outlet /> {/* 这里将渲染子路由的内容 */}
    </div>
  );
};

const Shop = () => {
  return <h2>I am shop component</h2>
}

const App = () => {
  return (
    <Routes>
      {/* 将Navigation设为父路由，嵌套子路由 */}
      <Route path='/' element={<Navigation />}>
        <Route index element={<Home />} /> {/* 根路径下渲染Home */}
        <Route path='shop' element={<Shop />} /> {/* /shop路径下渲染Shop */}
      </Route>
    </Routes>
  );
};

export default App;

修改说明 #

• 将原同级路由包裹在Navigation的路由节点内，形成嵌套关系
• Navigation中的Outlet会自动渲染匹配到的子路由组件，实现导航始终在顶部显示、路由切换时持久化的效果

内容的提问来源于stack exchange，提问作者Abdullah Rizwan