размещение ссылок на роутере на скользящей боковой панели

Question

Я создал одностраничное приложение, использующее реагирующий маршрутизатор, но теперь я хочу разместить ссылки на маршрутизатор в боковой панели, которая переходит слева.

Я пытался в течение нескольких днейно независимо от того, что я делаю, ссылки на маршрут продолжают появляться либо сами по себе, а не в компоненте боковой панели, либо они хотят визуализироваться в компоненте боковой панели после нажатия на них.

Компонент боковой панели:

import React, {Component} from 'react';
import './SideDrawer.css';
import {BrowserRouter, Route, Link} from 'react-router-dom';

const routes = [
  {
  path: '/',
  exact: true,
  sidebar: () => <div></div>,
  main: () => <p>Home</p>
  },
  {
  path: '/dogs',
  sidebar: () => <div>Dogs</div>,
  main: () => <p>Dogs</p>
  }
];


const sideDrawer = props => {
  let drawerClasses = 'side-drawer'

  if (props.show) {
    drawerClasses='side-drawer open'
  }
  return(
    <div className='Main'>
    <nav className={drawerClasses}>
    <BrowserRouter>
      <div style={{display: 'flex'}}>
        <div className='navBar'>
          <ul style={{listStyleType: 'none'}}>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/dogs'>Dogs</Link></li>
          </ul>


        </div>

          <div style={{flex:1, padding:'0px'}}>
            {routes.map((route) => (
              <Route
                key={route.path}
                path={route.path}
                exact={route.exact}
                component={route.main}
                />
            ))}
          </div>
      </div>
    </BrowserRouter>

 </nav>

</div>
);
};


export default sideDrawer;

Компонент приложения:

class App extends Component {
  state ={
    sideDrawerOpen: false
  };
  drawerToggleClickHandler = () => {
    this.setState((prevState) => {
      return {sideDrawerOpen: !prevState.sideDrawerOpen};
    });
  };

  backdropClickHandler = () => {
    this.setState({sideDrawerOpen: false});
  };

  render() {
    let backDrop;

    if (this.state.sideDrawerOpen) {
      backDrop = <Backdrop click={this.backdropClickHandler}/>;
    }
    return (
      <div style={{height:'100%'}} className="App">
        <Toolbar drawerClickHandler ={this.drawerToggleClickHandler}/>
        <SideDrawer show={this.state.sideDrawerOpen}/>
        {backDrop}
        <main style={{marginTop:'64px'}}>
        'place lists here'
        </main>
      </div>
    );
  }
}

export default App

Я надеялся, что скользящая боковая панель отобразит ссылки на маршрутизатор, и после нажатия они отобразят содержимое ссылок в пространстве рядом с / за скользящейбоковая панель.Но вместо этого он также хочет отобразить ссылки внутри боковой панели.

Answer 1

Мне удалось найти решение для моей проблемы.

Я создал компонент sidebar.js и разместил внутри него ссылки. Затем я создал значок кнопки в стиле гамбургера и использовал this.state и метод buttonToggle () для изменения состояния и отображения компонента, который содержит ссылки, которые я хотел, на боковой панели, в то же время отображая их в основном компоненте. Возможно, это не самый лучший способ, но это лучший способ, который я мог найти пока самостоятельно. Я изо всех сил пытался найти большую помощь в этом вопросе.

Мой код:

SideBar.js

import React, {Component} from 'react';
import './App.css';
import {BrowserRouter, Route, Link} from 'react-router-dom';

class SideBar extends Component {
  render(){
    return(
      <div style={{display: 'flex'}}>
        <div className='navBar'>
          <ul style={{listStyleType: 'none'}}>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/dogs'>MyDogs</Link></li>
          </ul>
        </div>
        </div>
    );
  }
}


export default SideBar;

DrawerToggleButton.js

import React, {Component} from 'react';
import './drawerToggleButton.css';
import SideBar from './sidebar.js';

const DrawerToggleButton = props => (
  <button className='toggle-button' onClick={props.click}>
    <div className='toggle-button-line'></div>
    <div className='toggle-button-line'></div>
    <div className='toggle-button-line'></div>
  </button>
);

class DrawerToggleButtonBind extends Component{
  constructor(props){
    super(props);

    this.state = {
      message: false
     }
  }

  buttonToggle(){
    this.setState({
      message: !this.state.message
    })
  }

  render(){
    return(
      <div className="DrawerToggleBind">
        <button className='toggle-button' onClick = { () => this.buttonToggle()} >
          <div className='toggle-button-line'></div>
          <div className='toggle-button-line'></div>
          <div className='toggle-button-line'></div>
        </button>
        {this.state.message ? <div><SideBar/></div>: null}
      </div>
   )
  }
}

export default DrawerToggleButtonBind;

App.js:

import React, { Component } from 'react';
import {BrowserRouter, Route, Link} from 'react-router-dom';
import './App.css';
import Home from './home.js';
import DogsList from './dogslist.js';
import DrawerToggleButtonBind from './drawerToggleButton.js';


const routes = [
  {
  path: '/',
  exact: true,
  sidebar: () => <div>Home</div>,
  main: () => <Home/>
  },
  {
  path: '/dogs',
  sidebar: () => <div>Dogs</div>,
  main: () => <DogsList/>
  }
];



  class App extends Component {

  render() {
    return(
      <div>
       <BrowserRouter>
        <DrawerToggleButtonBind/>
          <div style={{flex:1, padding:'0px'}}>
            {routes.map((route) => (
             <Route
              key={route.path}
              path={route.path}
              exact={route.exact}
              component={route.main}
              />
          ))}
        </div>
       </BrowserRouter>
      </div>
   )
  }
}

export default App;