React Router导航栏固定问题求助：切换路由时导航栏消失

你的问题出在当前路由配置里，只有访问根路径/时才会渲染NavBar组件，切换到/Accordion或/FormControl时，路由只会渲染对应的页面组件，导航栏自然就消失了。

下面是两种可行的解决办法：

方法一：将导航栏放在路由容器外 #

直接把NavBar从路由规则中抽出来，放在<Routes>组件外面，这样所有路由页面都会固定显示导航栏：

import Accordion from "./component/Accordion";
import FormControl from "./component/FormControl";
import NavBar from "./component/NavBar";
import NoPage from "./component/NoPage";
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <>
      <NavBar />
      <Routes>
        <Route path="/" element={<div>首页内容</div>} />
        <Route path="/Accordion" element={<Accordion />} />
        <Route path="/FormControl" element={<FormControl />} />
        <Route path="/*" element={<NoPage />} />
      </Routes>
    </>
  );
}

export default App;

方法二：使用嵌套路由（适合复杂布局） #

如果需要导航栏和页面内容有更紧密的布局关联，可以用嵌套路由。先创建一个布局组件，把NavBar和<Outlet>（路由内容出口）结合，再让所有页面路由作为它的子路由：

import Accordion from "./component/Accordion";
import FormControl from "./component/FormControl";
import NavBar from "./component/NavBar";
import NoPage from "./component/NoPage";
import { Routes, Route, Outlet } from 'react-router-dom';

// 布局组件：包含导航栏和内容出口
function Layout() {
  return (
    <>
      <NavBar />
      <Outlet /> {/* 子路由的内容会渲染在这里 */}
    </>
  );
}

function App() {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route path="/" element={<div>首页内容</div>} />
        <Route path="/Accordion" element={<Accordion />} />
        <Route path="/FormControl" element={<FormControl />} />
        <Route path="/*" element={<NoPage />} />
      </Route>
    </Routes>
  );
}

export default App;

两种方法都能实现点击链接只切换主体内容、导航栏固定显示的效果，你可以根据自己的布局需求选择。

内容的提问来源于stack exchange，提问作者065-gouranga