Redirect to search results component upon submit of search terms from search bar embedded in a global navbar

app.js

import React, { Component } from 'react'
import { Redirect } from 'react-router'

export default class Search extends Component {
  constructor () {
    super();
    this.state = {
      fireRedirect: false
    }
  }
  
  componentWillRecieveProps(nextProps) {
    this.setState({ fireRedirect: false })
  }
  
  submitForm = (e) => {
    e.preventDefault()
    this.setState({ fireRedirect: true })
  }
  
  render () {
    const { fireRedirect } = this.state
    
    return (
      <div>
        <form onSubmit={this.submitForm}>
          <button type="submit">Submit</button>
        </form>
        {fireRedirect && (
          <Redirect to='/search-results'/>
        )}
      </div>
    )
    
  }
}

Problem here is that react router doesn't replace component all the time.
So your Result component, or wherever you are redirecting, is rendered once, for the first time only.

To trigger changes on that Result component you should implement componentDidUpdate() method in Result component, with some code and logic that will trigger re-rendering.

For me solution was something like this

componentDidUpdate(prevProps, prevState, snapshot) {
    if (this.props.location.search !== prevProps.location.search) {
        this.props.index(this.props.access_token, this.props.location.search);
    }
}

location.search is search query from input
It's set in Redirect component
<Redirect to={{pathname: '/search-results'/, search: '?term=' + this.state.term}}>

or in history.push on submitForm

submitForm = (e) => {
    e.preventDefault();
    this.setState({ fireRedirect: true });
    this.props.history.push({
        pathname: '/search-results',
        search: '?term=' + this.inputElement.current.value
    })
}