title: Redirect to a page from a search form in React using React Router
body: <p>Expected: On every page, I have a search form. When submitted, it will show the fetched data. </p>
  
  <p>Occurs: When I submit the form, I receive a TypeError: dataItems is undefined</p>
  
  <p>Here's my app component </p>
  
  <pre><code>class App extends Component {
    render() {
      return (
        &lt;Router&gt;
          &lt;ThemeProvider theme={theme}&gt;
            &lt;AppWrapper&gt;
              &lt;Header /&gt;
              &lt;Switch&gt;
                &lt;Route path='/' exact component={HomePage} /&gt;
                &lt;Route path='/searched-anime' exact component={AnimeCard} /&gt;
                &lt;Route path='/:animeId' exact component={AnimeDetails} /&gt;
              &lt;/Switch&gt;
            &lt;/AppWrapper&gt;
          &lt;/ThemeProvider&gt;
        &lt;/Router&gt;
      );
    }
  }
  </code></pre>
  
  <p>Here's my form <code>AnimeSearchForm</code></p>
  
  <pre><code>class AnimeSearchForm extends Component {
    state = {
      dataItems: [],
      animeSearched: false,
      topAni: null
    }
  
    handleButtonSearch = async (e) =&gt; {
      e.preventDefault()
  
      const animeQuery = e.target.elements.anime.value
      const response = await fetch(`${API}/search/anime?q=${animeQuery}&amp;page=1`)
      const response2 = await fetch(`${API}/top/anime/1/movie`)
  
      const animeData = await response.json()
      const topAnime = await response2.json()
  
      this.setState({
        anime: !this.state.animeSearched,
        dataItems: animeData.results,
        topAni: topAnime.top
      })
    }
  
    render() {
      const { dataItems, topAnime, anime } = this.state
  
      return (
        &lt;div&gt;
          &lt;Form handleButtonSearch={this.handleButtonSearch} /&gt;
          {anime
            ?
            &lt;AnimeCard
              dataItems={dataItems}
              topAni={topAnime}
            /&gt;
            : null}
          {dataItems.length &gt; 0 &amp;&amp;
            &lt;Redirect to={{
              pathname: '/searched-anime',
              state: { dataItems: this.state.dataItems }
            }} /&gt;
          }
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>And my component to be rendered <code>AnimeCard</code></p>
  
  <pre><code>const AnimeCard = ({ dataItems }) =&gt; {
    return (
      &lt;AnimeCardWrapper&gt;
        {dataItems
          .filter(item =&gt; item.rated !== 'Rx' &amp;&amp; item.score !== 0 &amp;&amp; item.type === 'TV') // filter out adult content
          .map(item =&gt; {
            return (
              &lt;Card key={item.mal_id}&gt;
                &lt;Poster&gt;
                  &lt;PosterImg src={item.image_url} alt="poster" /&gt;
                &lt;/Poster&gt;
  
                &lt;Title&gt;{item.title}&lt;/Title&gt;
  
                &lt;Info&gt;
                  &lt;Score&gt;{item.score}&lt;/Score&gt;
                  &lt;Rating&gt;{item.rated}&lt;/Rating&gt;
                &lt;/Info&gt;
              &lt;/Card&gt;
            )
          })}
      &lt;/AnimeCardWrapper&gt;
    );
  }
  
  </code></pre>
  
  <p>I attempted to use the history API from React Router and my component rendered, but it would render with whatever component I was on at the given time. i.e I would search on the homepage and the search results would appear on the homepage with all of the homepage content. So I tried using redirect and ended up with this issue. </p>
  
  <p>I referred to <a href="https://stackoverflow.com/questions/42982036/redirecting-from-a-search-form-to-a-results-page-in-reactjs">this</a> post to get me rolling but to no avail.</p>