2017-09-05 9 views
2

私は反応ルータを使用して他のページにリダイレクトしています。現在のページにリダイレクトすると、リダイレクトを処理するコンポーネントは表示されなくなります。React Router v4が現在のページにリダイレクトされ、コンポーネントが消えます

この問題は別のページに表示されます。ターゲットパスと現在のパスを比較して、リダイレクトするかどうかを判断したくありません。 LoggedMenuがなぜ消えるのかわかりません。

誰かが私にそれを手伝ってもらえますか?

import React, {Component} from 'react'; 
import PropTypes from 'prop-types'; 
import { Redirect } from 'react-router'; 
import FontIcon from 'material-ui/FontIcon'; 
import Divider from 'material-ui/Divider'; 
import { List, ListItem, Avatar, Badge } from 'material-ui'; 
import { IconButton, IconMenu, MenuItem, FlatButton } from 'material-ui'; 

class LoggedMenu extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     redirectTo: '' 
    }; 
    this.redirectTo = this.redirectTo.bind(this); 
    } 

    redirectTo(pageName) { 
    this.setState({ 
     redirect: pageName 
    }) 
    } 

    render() { 
    switch (this.state.redirect) { 
     case 'home': 
     return <Redirect push to="/" />; 
     case 'profile': 
     return <Redirect push to="/profile" />; 
     case 'settings': 
     return <Redirect push to="/settings" />; 
     case 'help': 
     return <Redirect push to="/help" />; 
     default: 
     return (
      <IconMenu 
      iconButtonElement={ 
       <IconButton style={{padding: 0}}> 
       <MoreVertIcon color={white} /> 
       </IconButton> 
      } 
      anchorOrigin={{horizontal: 'right', vertical: 'top'}} 
      targetOrigin={{horizontal: 'right', vertical: 'top'}} 
      > 
      <MenuItem 
       onClick={()=>{ 
       this.redirectTo('profile'); 
       }} 
       primaryText="Profile" 
      /> 
      <MenuItem 
       onClick={()=>{ 
       this.redirectTo('settings'); 
       }} 
       primaryText="Settings" 
      /> 
      <MenuItem 
       onClick={()=>{ 
       this.redirectTo('help'); 
       }} 
       primaryText="Help" 
      /> 
      </IconMenu> 
     ) 
    } 
    } 
} 

​​

+0

ReactRouterを更新しないとv4の内部shouldComponentUpdateを使用withRouterでコンポーネントをラップまたはコンポーネントまで更新小道具を送信してください。 – MukulSharma

答えて

0

ReactRouter v4の内部... shouldComponentUpdateを使用するので、あなたのコンポーネントを再描画するために小道具の変更を加える必要があります。 ので、あなたのコンポーネントを再描画するために小道具の変更を加える必要がある...それ以外の場合は

export default withRouter(connect(mapStateToProps)(LoggedMenu)) 
関連する問題