Блог

Итак, в принципе, у меня проблема с тем, что react router не отображает мою системную панель. Я хочу прокрутить свои компоненты 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;
  

<Link to='/Sound'><VolumeUpIcon /></Link> ответ на вашу первую проблему и вторую, если вы хотите получить доступ к боковой панели в каждом компоненте, не помещайте его в маршрут переключения, просто поместите его вне маршрутизации… или, если вы хотите получить к нему доступ с помощью определенного маршрута, попробуйте использовать вложенную маршрутизацию

Хорошо, так что это кажется немного странным при вставке копии (я надеюсь, что это просто проблема, связанная с копированием и вставкой, и в вашем коде это не так). Но ваша проблема здесь:

<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: он переключает компоненты в зависимости от того, в каком каталоге (в каком вложенном 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>
    );
  }
}
  

Это довольно просто, но я надеюсь, вы поняли суть.

Кроме того, я бы посоветовал вам взглянуть на фреймворк пользовательского интерфейса, например, Material UI. Он уже предоставляет готовые к использованию компоненты (например, вашу боковую панель, которая там называется Drawer), он в первую очередь мобильен и прост в использовании благодаря адаптивному дизайну.