Javascript 带有React路由器的侧栏和仪表板

我想将侧边栏连接到仪表板。每次我单击侧边栏中的图标时，我都希望侧边栏保持不变，但仪表板需要更改。我的渲染有问题。当我点击声音图标时，侧边栏不会像你看到的那样停留

从“React”导入React
导入“./SystemSidebar.css”
从“@material ui/icons/Computer”导入SoundIcon；
从“@material ui/icons/Computer”导入计算机图标；
从“react router dom”导入{BrowserRouter，Route，Switch，Link}；
从“./Sound”导入声音；
从“./计算机导入计算机；
常量系统边栏=（）=>{
返回(
声音
电脑类
从“React”导入React，{Component}
从“./Sound”导入声音；
从“./计算机”导入计算机；
从“/SystemSidebar”导入系统侧栏；
类MainSystem扩展组件{
render（）{
返回(
);
}
}

您是否将两个单独的.js文件中的代码发布到此代码块中？您的

SystemSidebar

函数缺少一些右括号，如果所有这些代码都位于同一文件中，则此代码具有多个重复导入/不正确路径

除此之外，当在根URL处时，您将呈现两次

SystemSidebar

。您希望在此路径中为某种类型的主页/欢迎页创建一个组件，而不是侧边栏：

---

如果代码位于单独的文件中，请在单独的代码块中发布完整的代码。

SystemSidebar有自己的父项，即

const Settings=（）=>{return（案文）}

@tekila12我知道你是新手，请花些时间阅读本文档，以便社区能够更好地回答你的问题：代码示例应该是最少的、完整的和可验证的。请始终发布组件/模块的完整示例。此处没有足够的信息来给出有根据的答案。

import React from 'react'
import './SystemSidebar.css'
import SoundIcon from '@material-ui/icons/Computer';
import ComputerIcon from '@material-ui/icons/Computer';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import Sound from './Sound';
import Computer from './Computer;
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>
 

import React,{Component} from 'react'
import Sound from './Sound';
import Computer from './Computer';
import SystemSidebar from './SystemSidebar';
class MainSystem extends Component {

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