React-Router路由跳转后SystemSidebar未渲染问题求助

我帮你梳理下问题所在，一步步修复后就能让侧边栏始终保持显示了：

1. 先修复代码里的语法错误 #

这些小错误可能直接导致组件渲染失败：

• 在SystemSidebar里，你用了VolumeUpIcon但没正确导入，还把图标导错了：

  // 错误写法
  import SoundIcon from '@material-ui/icons/Computer';
  // 改成正确的导入
  import VolumeUpIcon from '@material-ui/icons/VolumeUp';
  import ComputerIcon from '@material-ui/icons/Computer';
  

• 导入Computer组件时缺少闭合引号：

  // 错误写法
  import Computer from './Computer;
  // 正确写法
  import Computer from './Computer';
  

2. 调整路由结构，确保侧边栏常驻 #

你的MainSystem里，SystemSidebar已经放在Switch外面了，理论上应该一直显示，但有个多余的路由配置会造成混淆：

// 这个路由完全多余，因为你已经在Switch外渲染了SystemSidebar
<Route exact path="/" component={SystemSidebar} />

当访问根路径时，这个路由会重复渲染一次侧边栏。你可以把它替换成默认页面，或者直接移除，修改后的路由结构如下：

<BrowserRouter>
  {/* 侧边栏放在Switch外面，所有路由下都会显示 */}
  <SystemSidebar />
  <Switch>
    {/* 根路径默认跳转到Sound页面 */}
    <Route exact path="/" component={Sound}/>
    <Route exact path="/Sound" component={Sound}/>
    <Route exact path="/Computer" component={Computer}/>
  </Switch>
</BrowserRouter>

3. 优化侧边栏的Link路径 #

使用绝对路径更清晰，避免相对路径可能带来的匹配问题：

<Link to='/Sound'><VolumeUpIcon /></Link>
<Link to='/Computer'><ComputerIcon /></Link>

修复后的完整代码示例 #

SystemSidebar.jsx #

import React from 'react'
import './SystemSidebar.css'
import VolumeUpIcon from '@material-ui/icons/VolumeUp';
import ComputerIcon from '@material-ui/icons/Computer';
import { Link } from 'react-router-dom';

const SystemSidebar=()=> {
 return ( 
<div className='system'>
 <div className="sidebar">
   <Link to='/Sound'><VolumeUpIcon /></Link>
   <h4> Sound</h4>
   <Link to='/Computer'><ComputerIcon /></Link>
   <h4> Computer</h4>
 </div>
 </div>
 );
};

export default SystemSidebar;

MainSystem.jsx #

import React,{Component} from 'react'
import Sound from './Sound';
import Computer from './Computer';
import SystemSidebar from './SystemSidebar';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

class MainSystem extends Component {
 render(){
 return ( 
<div className="MAIN">
 <BrowserRouter>
   <SystemSidebar />
   <Switch>
     <Route exact path="/" component={Sound}/>
     <Route exact path="/Sound" component={Sound}/>
     <Route exact path="/Computer" component={Computer}/>
   </Switch>
 </BrowserRouter>
 </div>
 );
 }
}

export default MainSystem;

这样修改后，不管点击侧边栏的哪个链接，SystemSidebar都会始终显示在页面上——因为它不在Switch的匹配范围内，Switch只会渲染当前匹配的页面组件，而侧边栏作为外层元素会一直存在。

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