reactjs - 将路由器链接放在滑动侧边栏中

Question

我已经使用 react-router 创建了一个单页应用程序，但我现在想将我的路由器链接放在从左侧过渡的侧边栏中。

我已经尝试了几天，但无论我似乎在做什么，我的路线链接总是单独出现而不是出现在侧边栏组件中，或者一旦点击它们就想在侧边栏组件中呈现。

侧边栏组件：

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

我希望滑动侧边栏能够呈现路由器链接，一旦单击它们就会在滑动侧边栏旁边/后面的空间中呈现链接内容。但相反，它也希望在侧边栏中呈现链接。

标签： reactjsreact-router

Answer 1

我设法为我的问题找到了解决方案。

我创建了一个 sidebar.js 组件并将链接放在其中。然后我创建了一个汉堡风格的按钮图标，并使用 this.state 和 buttonToggle() 方法来更改状态并在侧边栏中显示包含我想要的链接的组件，同时仍将它们呈现在主组件中。这可能不是最好的方法，但它是我目前能找到的最好的方法。我一直在努力为这个问题找到很多帮助。

我的代码：

边栏.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;

应用程序.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;