react侧边栏导航

React侧边栏导航可以使用第三方库来实现，比如`react-burger-menu`或者`react-sidenav`。以下是一个简单的示例，使用`react-burger-menu`实现侧边栏导航：

1.首先安装`react-burger-menu`：

npm install react-burger-menu --save

2.在组件中导入`react-burger-menu`和样式文件：

import React from 'react';
import { slide as Menu } from 'react-burger-menu';
import './Sidebar.css'; // 样式文件

3.创建`Sidebar`组件，并在其中渲染`Menu`组件：

class Sidebar extends React.Component {
  showSettings (event) {
    event.preventDefault();
  }

  render () {
    return (
      <Menu>
        <a className="menu-item" href="/">
          Home
        </a>

        <a className="menu-item" href="/about">
          About
        </a>

        <a className="menu-item" href="/contact">
          Contact
        </a>

        <a className="menu-item" href="#" onClick={this.showSettings}>
          Settings
        </a>
      </Menu>
    );
  }
}

4.以上代码中的`Menu`组件中的`a`元素即为侧边栏导航的每一项。你可以根据自己的需要来添加或修改这些元素。此外，你还可以通过指定`Menu`组件的属性来自定义侧边栏导航的样式和行为，具体可参考`react-burger-menu`的官方文档。