Question

我有一个简单的React应用程序，带有React-Router和MaterializeCSS用于样式化。

物化的SideNav起初工作，但是当我切换页面时，例如从root url转到url / login它会停止工作，只需在点击菜单图标时添加一个hash-url / login＃。它可能与react-router和browserHistory有关。

以下是该问题的相关代码：

firebase.auth().onAuthStateChanged((user) => {
 if(user){
  browserHistory.push('/');
 } else{
}
});

let loginRedirect = (nextState, replace, next) => {
 if(firebase.auth().currentUser){
  store.dispatch(actions.startLogout());
  replace('/');
 } else{
   next();
   }
};

ReactDOM.render(
 <Provider store={store}>
  <Router history={browserHistory}>
   <Route path="/" component={Layout}/>
   <Route path="/login" component={Login} onEnter={loginRedirect}/>
  </Router>
 </Provider>
,app);

$(document ).ready(function(){$('.button-collapse').sideNav({
  menuWidth: 200,
  edge: 'left',
  closeOnClick: true,
  draggable: true 
}
)});

Answer 1

jQuery和React在这里严重干扰。你可能最好使用react-material's Drawer component。它用React编写，使其更容易实现和维护。以下是他们的文档中的示例：

import React from 'react';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import RaisedButton from 'material-ui/RaisedButton';

export default class DrawerUndockedExample extends React.Component {

  constructor(props) {
    super(props);
    this.state = {open: false};
  }

  handleToggle = () => this.setState({open: !this.state.open});

  handleClose = () => this.setState({open: false});

  render() {
    return (
      <div>
        <RaisedButton
          label="Open Drawer"
          onTouchTap={this.handleToggle}
        />
        <Drawer
          docked={false}
          width={200}
          open={this.state.open}
          onRequestChange={(open) => this.setState({open})}
        >
          <MenuItem onTouchTap={this.handleClose}>Menu Item</MenuItem>
          <MenuItem onTouchTap={this.handleClose}>Menu Item 2</MenuItem>
        </Drawer>
      </div>
    );
  }
}

我还建议切换到Material-UI以获取您要构建的所有其他内容。

Materializecss的SideNav停止在React Web App中工作

1 个答案: