React Router v4 重定向到当前页面，组件消失答案

【问题标题】：React Router v4 redirect to current page and the component disappearsReact Router v4 重定向到当前页面，组件消失
【发布时间】：2018-02-13 16:16:39
【问题描述】：

我正在使用反应路由器重定向到其他页面。但是当我重定向到当前页面时，处理重定向的组件消失了。

而且这个问题出现在另一个页面，我不想比较目标路径和当前路径来决定是重定向还是留下。令人困惑，我不知道为什么 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>
        )
    }
  }
}

how the LoggedMenu disappears after redirect to current page

【问题讨论】：

ReactRouter v4 内部使用 shouldComponentUpdate...所以需要对 props 进行更改以重新渲染您的组件。

标签： reactjs redirect react-router material-ui

【解决方案1】：

ReactRouter v4 内部使用 shouldComponentUpdate...所以需要对 props 进行更改以重新渲染您的组件。尝试使用 withRouter 包装您的组件或将更新的道具发送到组件，否则它不会更新

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

【讨论】：

完美回应。解决了我的问题。用 withRouter 包装 redux 组件注入了历史记录，以便我可以导航。的解决方案对我来说效果不佳，因为我失去了 redux 状态。谢谢！