title: How to Handle Redirecting to the Same Route (with Query Params) Using React Router v4
body: <p>So I think this question has been asked a couple of times but not sure if it's been asked appropriately. Here's what I'm going through -- I have a route that is the following:</p>
  
  <pre><code>&lt;Route exact path={RoutePaths.PROPOSAL_ID} component={ReviewProposalView} /&gt;
  </code></pre>
  
  <p>The value of <code>RoutePaths.PROPOSAL_ID</code> is <code>/proposal/:id</code></p>
  
  <p>Inside of <code>ReviewProposalView</code>, I have the following <code>componentDidMount()</code> and <code>render()</code> methods:</p>
  
  <pre><code>class ReviewProposalView extends Component&lt;Props, State&gt; {
    state = {
      redirect: false,
      redirectTo: '',
      currentProposalIdIndex: // whatever current value,
      proposalIds: this.props.location.state.proposalIds,
      proposalMap: this.props.location.state.proposalMap,
      currentProposal: null
    }
  
    componentDidMount () {
      const {location} = this.props
  
      parseValueFromKeyInQueryString({queryString: location.search, key: 't'}, {
        noValueFound: () =&gt; {
          this.setState({
            redirect: true,
            redirectTo: RoutePaths.NOT_FOUND
          })
        },
        valueFound: (type: string) =&gt; {
          const {proposalMap} = this.state
          const proposalId = // ...assume we got this from pathname
  
          this.setState({
            currentProposal: proposalMap[proposalId]
          })
        }
      })
    }
  
    _confirmMatch = (confirmedProposal: Proposal) =&gt; {
      // store data on confirmedProposal
      // get next proposalId from this.state.proposalIds list
  
      const nextProposal = proposalMap[nextProposalId]
  
      this.setState({        
        redirect: true,
        redirectTo: {
          pathname: `${RoutePaths.PROPOSAL}/${nextProposal.id}`,
          search: `?t=${nextProposal.type}`,
          state: {
            currentProposalIdIndex: nextProposalIndex,
            proposalIds,
            proposalMap
          }
        }
      })
    }
  
    render () {
      const {currentProposal, redirect, redirectTo} = this.state
  
      if (redirect) {
        return &lt;Redirect push to={redirectTo} /&gt;
      }
  
      const ProposalComponent = ProposalComponentMap[currentProposal.type]
  
      return (
          &lt;div&gt;
            &lt;h1&gt;Review Proposals Page&lt;/h1&gt;
            &lt;ProposalComponent {...this.props} key={currentProposal.id} proposal={currentProposal}
                               confirmProposal={this._confirmProposal} /&gt;
          &lt;/div&gt;
      )
    }
  }
  
  // ====================================
  
  const ProposalComponentMap = {
   'PRODUCT': ProductProposalView
   'SERVICE': ServiceProposalView 
  }
  </code></pre>
  
  <p>The experience that this is creating is the user goes through a list of proposals and will either Accept or Reject the proposal. There are two different kinds of proposals (<code>ProductProposalView</code> or <code>ServiceProposalView</code>) that the user can interact with within this parent <code>ReviewProposalView</code>. The appropriate view gets rendered depending on the type of proposal we're dealing with.</p>
  
  <p>Every time an Accept or Reject confirmation is made on a proposal, I want to redirect the user to the next proposal in the queue and push a new URL in the browser history stack so that I can get Back button behavior for free. </p>
  
  <p>So if we start at <code>https://myreactapp.com/proposal/id1</code>, my <code>ReviewProposalView</code> goes through the entire lifecycle hitting <code>componentDidMount</code> at the end with no problem. My desire is that when the user goes to <code>https://myreactapp.com/proposal/id2</code> as a result of confirming a proposal and getting redirected via <code>&lt;Redirect /&gt;</code>, I want the entire lifecycle of the component to repeat from the beginning and to run through the logic in <code>componentDidMount</code> again -- essentially promoting a characteristic of immutability with a fresh instance/start.</p>
  
  <p>What I currently have does not accomplish this because the <code>ReviewProposalView</code> is already mounted when you hit the 2nd URL. My instincts tell me that how I've structured my components is wrong and I'm fundamentally misunderstanding something about the React Component lifecycles when they are coupled with <code>&lt;Route /&gt;</code>. Any and all guidance is super appreciated.</p>