title: Reload react component on clicking a Link
body: <p>I've a scenario where I've to navigate to urls like:</p>
  
  <blockquote>
    <p>localhost:3000/students and localhost:3000/students/id</p>
  </blockquote>
  
  <p>They both render the same component called StudentLookup. </p>
  
  <p>Here are my links and routes:</p>
  
  <pre><code> &lt;Link to="/students" /&gt;
  
   &lt;Switch&gt;
      &lt;Route exact path="/" component={HomePage} /&gt;
      &lt;Route path="/students/:id?" component={StudentLookup} /&gt;
      &lt;Route component={NotFound} /&gt;
   &lt;/Switch&gt;
  </code></pre>
  
  <p>Now in my StudentLookup I do:</p>
  
  <pre><code>class StudentLookup extends Component {
    constructor (props) {
      super(props)
      this.state = { studentId: ''}
      this.handleSubmitButton = this.handleSubmitButton.bind(this)
      this.onInputChange = this.onInputChange.bind(this)
    }
  
   handleSearch (e) {
      const { studentId } = this.state
      e.preventDefault()
      this.props.history.push(`/students/${studentId}`)
      this.props.fetchDetailsForStudent(studentId)
    }
  
    onInputChange (e) {
      this.setState({ studentId: e.target.value })
    }
  
    componentDidMount(){
      const studentId = this.props.match.params.id
      if(id) {
        this.setState({studentId})
        this.props.fetchDetailsForStudent(studentId)
      }
      else if(studentId === "") {
        this.props.history.push('/');
        this.setState({studentId: ''})
      }
      else
        this.setState({ studentId: '' })
    }
  
    componentWillReceiveProps(nextProps){ 
      console.log(nextProps.params) // this is always undefined
      console.log(this.props.params) // this is always undefined
    }
  
    render () {
      const studentId = this.props.studentDetails.student_id
      return (
        &lt;div className="search-container"&gt;
          &lt;form noValidate="noValidate" onSubmit={this.handleSearch}&gt;
            &lt;input type="text" value={this.state.studentId} onChange={this.onInputChange} placeholder="Enter Student Id" /&gt;
            &lt;button type="Submit"&gt;Search&lt;/button&gt;
            {studentHeader} // we populate this based on id
          &lt;/form&gt;
        &lt;/div&gt;
      )
    }
  }
  
  const mapStateToProps = (state, ownProps) =&gt; {
    return {
      studentDetails: state.studentInfo,
    }
  }
  
  const mapDispatchToProps = (dispatch, ownProps) =&gt; ({
    fetchDetailsForStudent (studentId) {
      dispatch(fetchDetailsForStudent(studentId))
    }
  })
  
  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(StudentLookup))
  </code></pre>
  
  <p>When I click on localhost:3000/students it shows the empty Search box as expected - then when I enter an id (in search box or url say 123) and hit enter - the studentInfo populates as expected (changing id in the url or search box also works) - however, if I then click back again on localhost:3000/students, it still shows the data from localhost:3000/students/123. 
  I'm looking for a way to reload localhost:3000/students again (with just the search box and no studentHeader) when I click the localhost:3000/students link.
  Any help is appreciated. Thanks</p>