React路由器v4重定向到當前頁面，組件消失

Question

我正在使用react路由器重定向到其他頁面。但是當我重定向到當前頁面時，處理重定向的組件消失。

而這個問題出現在另一個頁面，我不想比較目標路徑和當前路徑來決定是重定向還是停留。 這很讓人困惑，我不知道爲什麼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> 
     ) 
    } 
    } 
} 

​​

Answer 1

ReactRouter V4內部使用shouldComponentUpdate ...所以需要在道具的變化重新呈現您的組件。 嘗試用withRouter來包裝你的組件或發送更新的道具到組件否則將不更新

export default withRouter(connect(mapStateToProps)(LoggedMenu))