重新渲染通过react-router重定向

Question

所以，我有一个Search组件和一个Results组件。搜索组件在站点的标题中呈现，因此它是全局的。当用户在该搜索中输入文本时，他们将被重定向到结果组件。在Results视图中，我希望用户能够执行另一个Search并重新渲染Results组件。

目前无法使用。下面是我的全局搜索栏的代码。如您所见，我使用componentWillRecieveProps（）并尝试重置那里的状态。我使用react-router Redirect。

   class SearchBox extends ComponentBase {

    constructor(props) {
      super(props);


      this.state = {
       fireRedirect: false,
       dropdownOpen: false,
       location: '',
       term: '',
       distance: '50 mi',
       submitted: false,
       results: {}
      };


     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.select = this.select.bind(this);
     this.toggle = this.toggle.bind(this);  
  }

  componentWillReceiveProps(nextProps) {
   this.setState({ fireRedirect: false })
  }


  componentDidMount() {
   this.setState({
    location: this.props.city
  });


  toggle(e) {
    this.setState({
        dropdownOpen: !this.state.dropdownOpen
    });
   }

  select(event) {
    //let d = event.target.innerText.replace(" mi", "");
    this.setState({
        dropdownOpen: !this.state.dropdownOpen,
        distance: d
    });
 }

 handleChange(e) {
    const {
        name, value
    } = e.target;
    this.setState({
        [name]: value
    });
 }

handleSubmit(e) {
    e.preventDefault();
    this.setState({
        submitted: true,
        fireRedirect: true
    });
    const {
        location, term, distance
    } = this.state;
    const {
        dispatch
    } = this.props;

    if (term && location) {
      let q = "?term=" + term + "&location=" + location + "&distance=" + distance;
      this.setState({referrer: "/results" + q});
      //let q = "/" + term + "/" + location + "/" + distance;
      history.push("/results" + q);
      //history.goForward();
      //dispatch(searchActions.search(location, term, distance));
    }
}

render() {
    const {
        fireRedirect, referrer, location, term, distance
    } = this.state;   

    return ( < form className = "form-inline" >
        < span className = "lead mr-sm-2" > Find < /span> < Input type = "text"
        name = "term"
        id = "query"
        size = "lg"
        className = "form-control mr-sm-2"
        onChange = {
            this.handleChange
        }
        placeholder = "e.g., stationary" / > {
            /*<span>within </span>
                    <DistanceDropdown />
                    <span> of </span> */
        } < span className = "lead mr-sm-2" > Near < /span> < Input type = "text"
        name = "location"
        id = "loc"
        size = "lg"
        className = "form-control mr-sm-2"
        onChange = {
            this.handleChange
        }
        placeholder = "Location"
        value={this.state.location}
      />


        < Button style={{backgroundColor: '#008efe', color: 'white'}}
        size = "lg"
        onClick = {
            this.handleSubmit
        } > < i className = "icon-magnifier" > < /i>&nbsp;Search</Button >
        {fireRedirect && (
        <Redirect to={referrer} />
        )}
         < /form>

      );
  }
 }

这是我得到的错误

Warning: You tried to redirect to the same route you're currently on: "/results?term=concrete&location=Palo Alto&distance=50 mi"