javascript - 如何将 react-burger-menu 与 react router 一起使用？

Question

我正在尝试按照本指南 ( https://github.com/negomi/react-burger-menu ) 使用 react-router 实现 react-burger-menu

具体这部分https://github.com/negomi/react-burger-menu/wiki/FAQ#why-doesnt-the-link-component-from-react-router-work .

我遇到的问题是菜单按钮似乎位于菜单的左侧，而菜单似乎没有隐藏。这是它的屏幕截图。

我的代码是这样的:

app.js

// This component handles the App template used on every page.
import React, {PropTypes} from 'react';
import SideBar from './common/Header';

class App extends React.Component {
    render() {
        return (
            <div className="container-fluid">
                        <SideBar />
                        {this.props.children}
            </div>
        );
    }
}

App.propTypes = {
    children: PropTypes.object.isRequired
};

export default App;

header.js

import React, {PropTypes} from 'react';
import { Link, IndexLink } from 'react-router';
import {slide as Menu} from 'react-burger-menu';
import Radium from 'radium';

let RadiumLink = Radium(Link);
let RadiumIndexLink = Radium(IndexLink);

const SideBar = () => {
    return (


    <Menu className="bm-menu">
        <RadiumIndexLink className="bm-item-list" to="/" activeClassName="active">Home</RadiumIndexLink>
        <RadiumLink className="bm-item-list" to="/courses" activeClassName="active">Courses</RadiumLink>
        <RadiumLink className="bm-item-list" to="/about" activeClassName="active">About</RadiumLink>
    </Menu>

    );
};

export default SideBar;

样式.css

#app {
    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #4d4d4d;
    min-width: 550px;
    max-width: 850px;
    margin: 0 auto;
}

a.active {
    color: orange;
}

nav {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Position and sizing of burger button */
.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 36px;
}

/* Color/shape of burger icon bars */
.bm-burger-bars {
  background: #373a47;
}

/* Position and sizing of clickable cross button */
.bm-cross-button {
  height: 24px;
  width: 24px;
}

/* Color/shape of close button cross */
.bm-cross {
  background: #bdc3c7;
}

/* General sidebar styles */
.bm-menu {
  background: #373a47;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
}

/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
  fill: #373a47;
}

/* Wrapper for item list */
.bm-item-list {
  color: #b8b7ad;
  padding: 0.8em;
}

/* Styling of overlay */
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
}

为什么切换按钮出现在实际菜单的左侧，为什么实际菜单没有隐藏？如果我单击切换按钮，菜单会向右移动更多...

Answer 1

将此添加到您的 CSS:

.bm-menu-wrap {
  bottom: 0;
  left: 0;
}

这会将菜单定位到屏幕的左侧。

出现在屏幕左侧的按钮是有意设计的，如果你想让它粘在页面上而不是滚动时跟随你，请更改

.bm-burger-button {
   position:fixed;
} 

到

.bm-burger-button {
   position:absolute;
}