SideNav von Materialisecss funktioniert nicht mehr in React Web App

Question

Ich habe eine einfache React App mit React-Router und MaterializeCSS zum Stylen.

Das SideNav von materialise funktioniert zuerst, aber wenn ich Seiten wechsle, zum Beispiel von root url zu url/login, hört es auf zu arbeiten und fügt einfach eine hash - url/login # hinzu, wenn das Menü Icon angeklickt wird. Es hat wahrscheinlich etwas mit react-router und browserHistory zu tun.

Hier ist der entsprechende Code für die Ausgabe:

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 und React sind stark hier stören. Sie sind wahrscheinlich besser dran mit react-material's Drawer component. Es ist in React geschrieben und macht es viel einfacher zu implementieren und zu warten. Hier ist ein Beispiel aus ihrer Dokumentation:

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> 
    ); 
    } 
} 

Ich würde auch Material-UI für alle anderen Dinge, die Sie bauen wollen, wechseln empfehlen.