React-Router的问题

Question

所以基本上，我遇到了react路由器没有渲染我的SystemSidebar的问题。我想滚动浏览我的SystemSidebar组件，但我的问题是，当我按下'LinkSoundIcon‘时，它会将我重定向到’新页面‘，但该页面不会呈现我的systemSidebar。我希望当我点击侧边栏的任何链接时，我的侧边栏保持不变。

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>
    );
  }
}
    
export default MainSystem;

Answer 1

好吧，所以你的复制粘贴看起来有点不可靠(我希望这只是一个源于复制和粘贴的问题，在你的代码中不是这样的)。但你的问题在这里：

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

您的意思是这里的路由应该完全是http://<your root uri>/Sound

如果你想点击它，你也应该在链接中使用这条确切的路线，这意味着你需要在那里有斜杠：

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

更新：

因此，根据您的评论，当您单击链接时，您希望侧边栏保持不变。在这种情况下，请查看您的代码：

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

您可以在此处定义只有当您位于应用程序的根目录("/")时，才会加载组件SystemSidebar。当您更改该目录时，它将被卸载，例如，更改为"/Sound“。将卸载SystemSidebar，转而加载Sound。

由于您的边栏应该始终显示，它需要在您的主应用程序中，并在您的实际路由器逻辑之外。记住React Router的作用:它根据您所在的目录(哪个子URL)来切换组件。最好的做法是有一个边栏，一个应用程序栏或类似的东西，它们总是有自己的组件。您的实际内容应该位于一个单独的容器中，如果需要，路由器可以在其中交换出所需的组件。所以就像这样：

class MainSystem extends Component {
  render(){
    return (
      <div className="MAIN">
        <SystemSidebar />
        <div className="ContentContainer">
          <BrowserRouter>
            <Switch>
              <Route exact path="/Sound" component={Sound}/>
              <Route exact path="/Computer" component={Computer}/>
              {/* Route "/" should be last because it acts as fallback! */}
              <Route exact path="/" component={StartPage} />
            </Switch>
          </BrowserRouter>
        </div>
      </div>
    );
  }
}

这是非常基础的，但我希望您能领会它的要点。

此外，我还鼓励您以UI framework like Material UI为例。它已经提供了可供使用的组件(就像你的侧边栏，在那里被称为抽屉)，它是移动优先的，易于使用响应式设计。

Answer 2

第一个问题和第二个问题的<Link to='/Sound'><VolumeUpIcon /></Link>答案如果你想在每个组件中访问侧边栏，那么不要将它放在交换机路由中，只需将它放在路由之外……或者，如果您想通过特定的路由访问它，那么可以尝试使用嵌套路由