MaterializecssのSideNavがReact Web Appで動作しなくなる

Question

私はスタイリングのためにReact-RouterとMaterializeCSSを持つ簡単なReact Appを持っています。

MaterializeのSideNavは最初は動作しますが、ページを切り替えると、例えばroot urlからurl/loginに移動すると動作しなくなり、メニューアイコンをクリックするとハッシュ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-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に切り替えることをお勧めします。