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

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

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;

将路由器链接放置在滑动边栏中

1 个答案: