title: How to update the url of a page using an input field?
body: <p>I try to integrate a search page in my application with react router v5.</p>
  
  <p>How could I update my url's query parameter using my search box?</p>
  
  <p>When I refresh my application, I lose my search results and the value of my search field.</p>
  
  <p>I use redux to manage the state of the value of my search fields and my search results, I think that going through the parameters of the url would be a better solution but I do not know how to do that.</p>
  
  <p>I tried a solution (see my code), but the query parameter of the url is not synchronized with the value of my text field</p>
  
  <p>Edit: </p>
  
  <p>My component Routes.js</p>
  
  <pre><code> const Routes = (props) =&gt; {
      return (
         &lt;div&gt;
            &lt;Route exact path="/" component={Home} /&gt;
            &lt;Route
               exact
               path='/search'
               component={() =&gt; &lt;Search query={props.text} /&gt;}
            /&gt;
            &lt;Route path="/film/:id" component={MovieDetail} /&gt;  
            &lt;Route path="/FavorisList" component={WatchList} /&gt;
            &lt;Route path="/search/:search" component={Search} /&gt;
            &lt;Route path="*" component={NotFound} /&gt;  
         &lt;/div&gt;
  
    )}
  </code></pre>
  
  <p>My component SearchBar.js (Embedded in the navigation bar, the Search route displays the search results)</p>
  
  <p><strong>EDIT:</strong> </p>
  
  <p>I wish to realize the method used by Netflix for its research of series.</p>
  
  <p>I want to be able to search no matter what page I am in, if there is an entry in the input field, I navigate to the <code>search</code> page with<code>this.props.history.push (`` search /</code> ), if the input field is empty, I navigate to the page with <code>this.props.history.goBack ()</code>.</p>
  
  <p>The state inputChange is a flag that prevents me from pushing to the search page each time I enter a character.</p>
  
  <p>To know more, I had opened = a post here => <a href="https://stackoverflow.com/questions/57482066/how-to-change-the-route-according-to-the-value-of-a-field">How to change the route according to the value of a field</a></p>
  
  <pre><code>  class SearchBar extends React.Component {
        constructor(props) {
           super(props);
  
           this.state = {
              inputValue:'',
           };
  
         }
  
        setParams({ query }) {
           const searchParams = new URLSearchParams();
           searchParams.set("query", query || "");
           return searchParams.toString();
        }
  
        handleChange = (event) =&gt; {
  
            const query = event.target.value
            this.setState({ inputValue: event.target.value})
  
            if (event.target.value === '') {
               this.props.history.goBack()
               this.setState({ initialChange: true }) 
               return;
            } 
  
            if(event.target.value.length &amp;&amp; this.state.initialChange){
                 this.setState({
                    initialChange:false
                 }, ()=&gt; {
  
                const url = this.setParams({ query: query });
                this.props.history.push(`/search?${url}`)
                this.search(query)
             })
           }
         }
  
         search = (query) =&gt; {
             //search results retrieved with redux 
             this.props.applyInitialResult(query, 1)
         }
  
         render() {
            return (
              &lt;div&gt;
                 &lt;input
                     type="text"
                     value={this.state.inputValue}
                     placeholder="Search movie..."
                     className={style.field}
                     onChange={this.handleChange.bind(this)}
                 /&gt;  
              &lt;/div&gt;
            );
          }
  
  
         export default SearchBar;
  </code></pre>
  
  <p>Component App.js</p>
  
  <pre><code>       class App extends React.Component {
            render(){
                return (
                   &lt;div&gt;
                      &lt;BrowserRouter&gt;
                         &lt;NavBar /&gt;
                         &lt;Routes/&gt;
                      &lt;/BrowserRouter&gt;
                   &lt;/div&gt;
                );
             }
          }
  
          export default App;
  </code></pre>
  
  <p>Query for search results (Managed with Redux)</p>
  
  <pre><code>      export function applyInitialResult(query, page){
            return function(dispatch){
                getFilmsFromApiWithSearchedText(query, page).then(data =&gt; {
                   if(page === 1){
                       dispatch({
                          type:AT_SEARCH_MOVIE.SETRESULT,
                          query:query,
                          payload:data,
                       })
                    }
                 })
               }
           }
  </code></pre>