退出时反应路由器重定向

Question

我正在尝试从“mypolls”页面重定向到索引路径。

问题是，当我单击标题中的注销按钮时，它会重定向到列表中第一个Link组件的路径

import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';

class PollsList extends Component {
  static contextTypes = {
    router: PropTypes.object
  };

  componentWillMount() {
    this.props.fetchPolls();
  }

  componentWillReceiveProps(nextProps) {
    const { authenticatedUser, type } = nextProps;
    if (!authenticatedUser && type === 'mypolls') {
      this.context.router.push('/');
    }
  }

  componentWillUnmount() {
    //Important! If your component is navigating based on some global state(from say componentWillReceiveProps)
    //always reset that global state back to null when you REMOUNT
     this.props.resetMe();
  }

  renderOptions(options) {
     return options.map(o => {
        o = o.trim();
        return (
          <span className="list-group-item-text">{" " + o + " "}</span>
        );
     });
  }

  renderPolls(polls) {
    const { type, authenticatedUser, user } = this.props;
    if (authenticatedUser) {
      if (type === 'mypolls') {
        return polls.filter(poll => user.user._id === poll.authorId)
        .map((poll) => {
          return (
            <li className="list-group-item" key={poll._id}>
              <Link style={{color:'black'}} to={"polls/" + poll._id}>
// example redirect: http://localhost:8080/polls/586e0d06eedc57071566b1f2

                <h3 className="list-group-item-heading">{poll.title}</h3>
              </Link>
                {this.renderOptions(poll.options)}
            </li>
          );
        });
      }
    }

    return polls.map((poll) => {
      return (
        <li className="list-group-item" key={poll._id}>
          <Link style={{color:'black'}} to={"polls/" + poll._id}>
            <h3 className="list-group-item-heading">{poll.title}</h3>
          </Link>
            {this.renderOptions(poll.options)}
        </li>
      );
    });
  }

  render() {
    const { polls, loading, error } = this.props.pollsList;

    if (loading) {
      return <div className="container"><h1>Polls</h1><h3>Loading...</h3></div>
    } else if (error) {
      return <div className="alert alert-danger">Error: {error.message}</div>
    }

    return (
      <div className="container">
        <div className="col-md-6 col-md-offset-3">
          <h1>Polls</h1>
          <ul className="list-group">
            {this.renderPolls(polls)}
          </ul>
        </div>
      </div>
    );
  }
}


export default PollsList;

如果用户已注销，Header.js组件也会设置为重定向

  componentWillReceiveProps(nextProps) {
    if (nextProps.deletedPoll.error && nextProps.deletedPoll.error.message) {//delete failure
      alert(nextProps.deletedPoll.error.message || 'Could not delete. Please try again.');
    } else if (nextProps.deletedPoll.poll && !nextProps.deletedPoll.error) {//delete success
      this.context.router.push('/');
    } else if (this.props.user.user && !nextProps.user.user) {//logout (had user(this.props.user.user) but no loger the case (!nextProps.user.user))
      this.context.router.push('/');
    }
  }

这是容器组件

import { connect } from 'react-redux'
import { fetchPolls, fetchPollsSuccess, fetchPollsFailure, resetPolls } from '../actions/polls';
import PollsList from '../components/PollsList';


const mapStateToProps = (state) => {
  return {
    pollsList: state.polls.pollsList,
    user: state.user,
    status: state.user.status,
    authenticatedUser: state.user.status === 'authenticated' ? state.user.user : null
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    fetchPolls: () => {
      dispatch(fetchPolls()).then((response) => {
            !response.error ? dispatch(fetchPollsSuccess(response.payload.data)) : dispatch(fetchPollsFailure(response.payload.data));
          });
    },
    resetMe: () => {
      dispatch(resetPolls());
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(PollsList);