title: React Router does not update component if url parameter changes
body: <p>I just implemented a global search in my website and I started having issues with React-Router. It is not updating the view if the url changes parameters.</p>
  <p>For example, navigating from <code>/users/454545</code> to <code>/teams/555555</code> works as expected. However, navigating from <code>/teams/111111</code> to <code>teams/222222</code> changes the url but the component is still <code>/teams/111111</code>.</p>
  <p>Here is my code fo the Search Input field.</p>
  <pre><code>const SearchResult = ({ id, url, selectResult, text, type }) =&gt; (
      &lt;Row key={id} onClick={() =&gt; selectResult(url)} width='100%' padding='5px 15px 5px 15px' style={{cursor: 'pointer'}}&gt;
          &lt;Column  alignItems='flex-start' style={{width: '100%'}}&gt;
              &lt;Label textAlign='left' color='#ffffff'&gt;{text}&lt;/Label&gt;
          &lt;/Column&gt;
          &lt;Column style={{width: '100%'}}&gt;
              &lt;Label textAlign='right' color='#ffffff'&gt;{type}&lt;/Label&gt;
          &lt;/Column&gt;
      &lt;/Row&gt;
  )
  
  const SearchInput = (props) =&gt; {
      const { isSearching, name, onChange, onClear, results } = props;
  
      return (
          &lt;Section width='100%' style={{display: 'flex', position: 'relative'}}&gt;
              &lt;Wrapper height={props.height} margin={props.margin}&gt;
                  &lt;i className=&quot;fas fa-search&quot; style={{color: 'white'}} /&gt;
                  &lt;input id='search_input' placeholder={'Search for a team, circuit, or user'} name={name} onChange={onChange} style={{outline: 'none', backgroundColor: 'transparent', borderColor: 'transparent', color: '#ffffff', width: '100%'}} /&gt;
                  {onClear &amp;&amp; !isSearching &amp;&amp; &lt;i onClick={onClear} className=&quot;fas fa-times-circle&quot; style={{color: '#50E3C2'}} /&gt;}
                  {isSearching &amp;&amp; 
                  &lt;Spinner viewBox=&quot;0 0 50 50&quot; style={{marginBottom: '0px', height: '50px', width: '50px'}}&gt;
                      &lt;circle
                      className=&quot;path&quot;
                      cx=&quot;25&quot;
                      cy=&quot;25&quot;
                      r=&quot;10&quot;
                      fill=&quot;none&quot;
                      strokeWidth=&quot;4&quot;
                       /&gt;
                  &lt;/Spinner&gt;
                  }
              &lt;/Wrapper&gt;
              {results &amp;&amp; &lt;Section backgroundColor='#00121A' border='1px solid #004464' style={{maxHeight: '400px', position: 'absolute', top: '100%', left: '0px', width: '97%', overflowY: 'scroll'}}&gt;
                  &lt;Section backgroundColor='#00121A' style={{display: 'flex', flexDirection: 'column', padding: '15px 0px 0px 0px', justifyContent: 'center', alignItems: 'center', width: '100%'}}&gt;
                      {results.length === 0 &amp;&amp; &lt;Text padding='0px 0px 15px 0px' color='#ffffff' fontSize='16px'&gt;We didn't find anything...&lt;/Text&gt;}
                      {results.length !== 0 &amp;&amp; results.map(r =&gt; &lt;SearchResult selectResult={props.selectResult} id={r._id} url={r.url} text={r.text} type={r.type} /&gt;)}
                  &lt;/Section&gt;
              &lt;/Section&gt;}
          &lt;/Section&gt;
      )
  }
  
  export default SearchInput;
  </code></pre>
  <p>The parent component is a nav bar which looks something like this. I've slimmed it down for readability.</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import { connect } from 'react-redux';
  
  import SearchInput from '../shared/inputs/SearchInput';
  
  const TopNav = (props) =&gt; {
      const [search, setSearch] = useState(null);
      const [searchResults, setSearchResults] = useState(null);
      const debouncedSearchTerm = useDebounce(search, 300);
      const [isSearching, setIsSearching] = useState(false);
  
      function clearSearch() {
          document.getElementById('search_input').value = '';
          setSearchResults(null);
      }
  
      function searchChange(e) {
          if (!e.target.value) return setSearchResults(null);
          setSearch(e.target.value);
          setIsSearching(true);
      }
  
      async function updateQuery(query) {
          const data = {
              search: query
          }
          
          const results = await api.search.query(data);
  
          setSearchResults(results);
          setIsSearching(false);
      }
  
      function selectResult(url) {
          props.history.push(url);
          setSearchResults(null);
      }
  
      function useDebounce(value, delay) {
          // State and setters for debounced value
          const [debouncedValue, setDebouncedValue] = useState(value);
        
          useEffect(
            () =&gt; {
              // Update debounced value after delay
              const handler = setTimeout(() =&gt; {
                setDebouncedValue(value);
              }, delay);
        
              // Cancel the timeout if value changes (also on delay change or unmount)
              // This is how we prevent debounced value from updating if value is changed ...
              // .. within the delay period. Timeout gets cleared and restarted.
              return () =&gt; {
                clearTimeout(handler);
              };
            },
            [value, delay] // Only re-call effect if value or delay changes
          );
        
          return debouncedValue;
        }
  
      useEffect(() =&gt; {
  
          if (debouncedSearchTerm) {
              
              updateQuery(debouncedSearchTerm);
            } else {
              setSearchResults(null);
            }
      }, [user, debouncedSearchTerm])
  
      return (
          &lt;ContentContainer style={{boxShadow: '0 0px 0px 0 #000000', position: 'fixed', zIndex: 1000}}  backgroundColor='#00121A' borderRadius='0px' width='100%'&gt;
              &lt;Section style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50px'}} width='1200px'&gt;
                  &lt;SearchInput height={'30px'} margin='0px 20px 0px 0px' isSearching={isSearching} selectResult={selectResult} onChange={searchChange} onClear={clearSearch} results={searchResults} /&gt;
              &lt;/Section&gt;
          &lt;/ContentContainer&gt;
      )
  }
  
  function mapStateToProps(state) {
      return {
          user: state.user.data,
          notifs: state.notifs
      }
  }
  
  export default connect(mapStateToProps, { logout, fetchNotifs, updateNotifs })(TopNav);
  </code></pre>
  <p>Tl;DR</p>
  <p>Using react-router for site navigation. Doesn't update component if navigating from <code>/teams/111111</code> to <code>/teams/222222</code> but does update if navigating from <code>/users/111111</code> to <code>/teams/222222</code>.</p>
  <p>Any and all help appreciated!</p>