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로 작성되어 구현 및 유지 관리가 훨씬 쉬워졌습니다. 나는 또한 당신이 구축하고자하는 모든 다른 물건 Material-UI로 전환하는 것이 좋습니다 것

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

: 여기에 해당 설명서의 예입니다.