title: React Router Redirecting on Logout
body: <p>I am trying to redirect to the index route from "mypolls" page.</p>
  
  <p>The problem is when I click the logout button in the header it redirects to the path of the first Link component in my list</p>
  
  <pre><code>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 &amp;&amp; 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 =&gt; {
          o = o.trim();
          return (
            &lt;span className="list-group-item-text"&gt;{" " + o + " "}&lt;/span&gt;
          );
       });
    }
  
    renderPolls(polls) {
      const { type, authenticatedUser, user } = this.props;
      if (authenticatedUser) {
        if (type === 'mypolls') {
          return polls.filter(poll =&gt; user.user._id === poll.authorId)
          .map((poll) =&gt; {
            return (
              &lt;li className="list-group-item" key={poll._id}&gt;
                &lt;Link style={{color:'black'}} to={"polls/" + poll._id}&gt;
  // example redirect: http://localhost:8080/polls/586e0d06eedc57071566b1f2
  
                  &lt;h3 className="list-group-item-heading"&gt;{poll.title}&lt;/h3&gt;
                &lt;/Link&gt;
                  {this.renderOptions(poll.options)}
              &lt;/li&gt;
            );
          });
        }
      }
  
      return polls.map((poll) =&gt; {
        return (
          &lt;li className="list-group-item" key={poll._id}&gt;
            &lt;Link style={{color:'black'}} to={"polls/" + poll._id}&gt;
              &lt;h3 className="list-group-item-heading"&gt;{poll.title}&lt;/h3&gt;
            &lt;/Link&gt;
              {this.renderOptions(poll.options)}
          &lt;/li&gt;
        );
      });
    }
  
    render() {
      const { polls, loading, error } = this.props.pollsList;
  
      if (loading) {
        return &lt;div className="container"&gt;&lt;h1&gt;Polls&lt;/h1&gt;&lt;h3&gt;Loading...&lt;/h3&gt;&lt;/div&gt;
      } else if (error) {
        return &lt;div className="alert alert-danger"&gt;Error: {error.message}&lt;/div&gt;
      }
  
      return (
        &lt;div className="container"&gt;
          &lt;div className="col-md-6 col-md-offset-3"&gt;
            &lt;h1&gt;Polls&lt;/h1&gt;
            &lt;ul className="list-group"&gt;
              {this.renderPolls(polls)}
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  
  export default PollsList;
  </code></pre>
  
  <p>The Header.js component also is set to redirect if the user is logged out</p>
  
  <pre><code>  componentWillReceiveProps(nextProps) {
      if (nextProps.deletedPoll.error &amp;&amp; nextProps.deletedPoll.error.message) {//delete failure
        alert(nextProps.deletedPoll.error.message || 'Could not delete. Please try again.');
      } else if (nextProps.deletedPoll.poll &amp;&amp; !nextProps.deletedPoll.error) {//delete success
        this.context.router.push('/');
      } else if (this.props.user.user &amp;&amp; !nextProps.user.user) {//logout (had user(this.props.user.user) but no loger the case (!nextProps.user.user))
        this.context.router.push('/');
      }
    }
  </code></pre>
  
  <p>Here is the container component</p>
  
  <pre><code>import { connect } from 'react-redux'
  import { fetchPolls, fetchPollsSuccess, fetchPollsFailure, resetPolls } from '../actions/polls';
  import PollsList from '../components/PollsList';
  
  
  const mapStateToProps = (state) =&gt; {
    return {
      pollsList: state.polls.pollsList,
      user: state.user,
      status: state.user.status,
      authenticatedUser: state.user.status === 'authenticated' ? state.user.user : null
    };
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return {
      fetchPolls: () =&gt; {
        dispatch(fetchPolls()).then((response) =&gt; {
              !response.error ? dispatch(fetchPollsSuccess(response.payload.data)) : dispatch(fetchPollsFailure(response.payload.data));
            });
      },
      resetMe: () =&gt; {
        dispatch(resetPolls());
      }
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(PollsList);
  </code></pre>