In my main class I have a nav bar with the options below:

          <NavDropdown title=Search id=collasible-nav-dropdown>

            <NavDropdown.Item href=#/searchpage/p onClick={this.dontEdit}>Find People</NavDropdown.Item>

            <NavDropdown.Item href=#/searchpage/s onClick={this.searchSchool}>Find Schools</NavDropdown.Item>

            <NavDropdown.Item href=#/searchpage/w onClick={this.dontEdit}>Find Work Places</NavDropdown.Item>

          </NavDropdown>

These have a route which routes to the same component which then reads the parameter at the end of the URL and runs a different search depending on the value. For example 's' is search schools and 'p' is search people. If I navigate between the different search functions from the nav bar then it doesn't refresh to the new search. For example if I go from 'Find Schools' to 'Find Work' it stays on schools, but if I were to go direct to 'Find Work Places' then it goes there direct. Also if I navigate to the home page and back to another search then it works.

The route looks like:

<Route path=/searchpage/:type  render={props => (<SearchPage {...props} findPerson={this.findPerson} routeReset={this.routeReset} getPersonsByName={this.getPersonsByName} />)}/>

Is anyone able to advise how to get this to route as I want it to? The search component is like:

import Row from 'react-bootstrap/Row';

import Col from 'react-bootstrap/Col';

import Container from 'react-bootstrap/Container';

import Button from 'react-bootstrap/Button';



import Flash from './components/flash';

import Search from ./components/search;



const searchtypes = {p:People,w:Work Places,s:Schools};



class SearchPage extends Component {







  constructor(props) {

    super(props);



    this.state = {

      type:this.props.match.params.type

    }

  }



  componentDidMount(){



  }





  render() {

    return (

      <Container>

        <Row>

          <Col>

            <h4>Search {searchtypes[this.state.type]}</h4>

            <br/>

          </Col>

        </Row>

        <Row><Col><Search {...this.props} type={this.state.type}/></Col></Row>

      </Container>

    );

  }

}



export default SearchPage;