React路由问题：实现MenuBar固定、ContentPage随路由切换

核心思路 #

把MenuBar放在路由容器内但不参与路径匹配，始终固定显示；在ContentPage中配置路由规则，根据当前路径渲染对应的页面组件。

具体修改步骤及代码 #

1. 修正App组件的路由容器导入

原代码用了react-router的Router，需要换成react-router-dom的BrowserRouter（无需手动配置history，更适合开发场景）：

import logo from './logo.svg';
import './style/App.css';
import MenuBar from './component/layout/MenuBar'
import ContentPage from './component/layout/ContentPage';
// 替换Router导入
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Router>
        {/* MenuBar固定在路由容器内，始终渲染 */}
        <MenuBar/>
        {/* ContentPage负责承载路由切换的内容 */}
        <ContentPage/>
      </Router>
    </div>
  );
}

export default App;

2. 完善MenuBar的导航链接（可选，增加示例）

可以多添加几个导航按钮，方便测试路由切换：

import React from 'react';
import { Link } from 'react-router-dom';
import '../../style/layout/menu-bar.css'

function MenuBar(props) {
  return <div className='MenuBar'>
    <button><Link to="/page1">Page 1</Link></button>
    <button><Link to="/page2">Page 2</Link></button>
    <button><Link to="/">首页</Link></button>
  </div>;
}
  
export default MenuBar;

3. 修改ContentPage组件，添加路由匹配规则

去掉重复的Router导入，在ContentPage内部配置Route组件，匹配不同路径渲染对应页面：

import React from 'react';
import { Route, Routes } from 'react-router-dom'; // 导入Routes和Route
import CrudPage from '../page/CrudPage';
// 可以导入其他页面组件，比如Page2
// import Page2 from '../page/Page2';
import '../../style/layout/content-page.css'

function ContentPage(props) {
    return <div className='ContentPage'>
      {/* 使用Routes包裹所有Route，这是react-router-dom v6+的写法 */}
      <Routes>
        {/* 匹配/page1，渲染CrudPage */}
        <Route path="/page1" element={<CrudPage />} />
        {/* 可以添加更多路由规则 */}
        {/* <Route path="/page2" element={<Page2 />} /> */}
        {/* 默认路由，匹配根路径 */}
        <Route path="/" element={<div>这是首页内容</div>} />
      </Routes>
    </div>;
}

export default ContentPage;

关键注意事项 #

• 确保所有路由相关组件（Link、Route、Routes）都在同一个Router容器的上下文内，否则路由功能会失效
• 如果使用的是react-router-dom v5版本，需要把Routes换成Switch，element属性换成component或者render（建议升级到v6+，写法更简洁）
• MenuBar因为没有被包裹在任何Route里，所以会始终渲染，实现固定效果

内容的提问来源于stack exchange，提问作者Ma Việt Tùng