带有 React-Router 的 SideBar 和仪表板

Question

我想将侧边栏连接到仪表板。 每次单击侧边栏中的图标时，我都希望侧边栏保持不变，但仪表板要更改。 https://imgur.com/1hwNlNr我在渲染时遇到问题。 当我点击声音图标侧边栏时，你可以看到https://imgur.com/YjLmhLh

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> 
        );
      }
    }
    

Answer 1

您是否将两个单独的 .js 文件中的代码发布到此代码块中？ 您的SystemSidebar函数缺少一些SystemSidebar括号/方括号，并且如果所有这些代码都位于同一个文件中，则此代码有多个重复的导入/不正确的路径。

除此之外，您在根 URL 处呈现SystemSidebar两次。 您需要此路线上某种类型的主页/欢迎页面的组件，而不是侧边栏：

<Route exact path="/" component={SystemSidebar} />

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