React项目点击侧边栏链接后侧边栏消失的问题求助

问题根因很明确：你当前的路由配置是给每个页面路由单独渲染Navbar和对应组件，只有Home组件里包含Sidebar，跳转到Chess这类页面时，渲染的是Chess组件+Navbar，自然没有Sidebar。要实现Navbar和Sidebar常驻、仅切换主内容区，需要重构路由结构，把Navbar和Sidebar抽成全局布局组件。

步骤1：创建全局布局组件（Layout.js） #

把Navbar、Sidebar和路由出口整合到一个布局组件里，所有页面共享这个布局：

import { useSelector } from 'react-redux';
import { Outlet } from 'react-router-dom';
import Navbar from './Navbar';
import Sidebar from './Sidebar';

const Layout = () => {
  const sidebarOpen = useSelector(state => state.sidebarOpen); // 从Redux取状态

  return (
    <div className="app-container">
      <Navbar />
      {/* 根据Redux状态控制Sidebar显示 */}
      {sidebarOpen && <Sidebar />}
      {/* Outlet是react-router-dom提供的路由出口，会渲染当前匹配的页面组件 */}
      <main className="content-area">
        <Outlet />
      </main>
    </div>
  );
};

export default Layout;

步骤2：重构App.js的路由配置 #

让所有页面路由嵌套在Layout组件下，这样Navbar和Sidebar会一直渲染，只有Outlet里的内容随路由切换：

import { Routes, Route } from 'react-router-dom';
import Layout from './Layout';
import Home from './Home';
import Chess from './Chess';
// 其他功能页面组件

function App() {
  return (
    <Routes>
      {/* 所有页面都使用Layout布局 */}
      <Route element={<Layout />}>
        <Route path="/" element={<Home />} />
        <Route path="/chess" element={<Chess />} />
        {/* 其他页面路由 */}
      </Route>
    </Routes>
  );
}

export default App;

步骤3：调整Home组件 #

把原来Home组件里的Sidebar代码移除，Home只保留自身的主内容即可：

// Home.js
const Home = () => {
  return (
    <div className="home-content">
      {/* 这里是Home页面的专属内容 */}
      <h1>首页</h1>
    </div>
  );
};

export default Home;

验证效果 #

现在点击Sidebar里的Link跳转到Chess页面时，Layout组件会一直渲染Navbar和Sidebar（根据Redux的sidebarOpen状态控制显示），只有Outlet里的内容从Home切换到Chess，完全符合你的需求。

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