title: How does my child component have access to `history` if it isn't passed as a propo?
body: <p>I have a component called <code>Bar.js</code> that has a child component called <code>Search.js</code>. Inside <code>Bar.js</code> it is simply used like this: <code>&lt;Search/&gt;</code> so no props are passed in.</p>
  <p>But <code>Search.js</code> looks like this so how is it using <code>history</code>?</p>
  <pre><code>const Search = () =&gt; {
    let term = &quot;&quot;;
  
    return (
      &lt;Route
        render={({ history }) =&gt; (
          &lt;Form
            onSubmit={(e) =&gt; {
              e.preventDefault();
              history.push(`/search/${term}`);
            }}
            inline
          &gt;
            &lt;FormControl
              style={{ maxWidth: &quot;150px&quot;, alignItems: &quot;right&quot; }}
              id=&quot;interval&quot;
              type=&quot;text&quot;
              placeholder=&quot;Search&quot;
              className=&quot; mr-sm-2&quot;
              onChange={(e) =&gt; (term = e.target.value)}
              defaultValue={term}
            /&gt;
            &lt;Button variant=&quot;light&quot; style={{ marginRight: &quot;0px&quot; }} type=&quot;submit&quot;&gt;
              {/* &lt;FontAwesomeIcon size=&quot;2x&quot; icon={faSearch} /&gt; */}
              &lt;Image alt=&quot;search&quot; src=&quot;/img/NavBar/search.svg&quot; /&gt;
            &lt;/Button&gt;
          &lt;/Form&gt;
        )}
      /&gt;
    );
  };
  export default Search;
  </code></pre>