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

Posted 2023-02-21

【中文标题】React Router v4 重定向到当前页面，组件消失

【英文标题】：React Router v4 redirect to current page and the component disappears

【发布时间】：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 进行更改以重新渲染您的组件。

【参考方案1】：

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

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

【讨论】：

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