javascript - React Router を使用して React の検索フォームからページにリダイレクトする

Question

想定: すべてのページに検索フォームがあります。送信すると、取得したデータが表示されます。

発生: フォームを送信すると、TypeError: dataItems is undefined が表示されます

これが私のアプリコンポーネントです

class App extends Component {
  render() {
    return (
      <Router>
        <ThemeProvider theme={theme}>
          <AppWrapper>
            <Header />
            <Switch>
              <Route path='/' exact component={HomePage} />
              <Route path='/searched-anime' exact component={AnimeCard} />
              <Route path='/:animeId' exact component={AnimeDetails} />
            </Switch>
          </AppWrapper>
        </ThemeProvider>
      </Router>
    );
  }
}

これが私のフォームですAnimeSearchForm

class AnimeSearchForm extends Component {
  state = {
    dataItems: [],
    animeSearched: false,
    topAni: null
  }

  handleButtonSearch = async (e) => {
    e.preventDefault()

    const animeQuery = e.target.elements.anime.value
    const response = await fetch(`${API}/search/anime?q=${animeQuery}&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 (
      <div>
        <Form handleButtonSearch={this.handleButtonSearch} />
        {anime
          ?
          <AnimeCard
            dataItems={dataItems}
            topAni={topAnime}
          />
          : null}
        {dataItems.length > 0 &&
          <Redirect to={{
            pathname: '/searched-anime',
            state: { dataItems: this.state.dataItems }
          }} />
        }
      </div>
    )
  }
}

そして、私のコンポーネントがレンダリングされるAnimeCard

const AnimeCard = ({ dataItems }) => {
  return (
    <AnimeCardWrapper>
      {dataItems
        .filter(item => item.rated !== 'Rx' && item.score !== 0 && item.type === 'TV') // filter out adult content
        .map(item => {
          return (
            <Card key={item.mal_id}>
              <Poster>
                <PosterImg src={item.image_url} alt="poster" />
              </Poster>

              <Title>{item.title}</Title>

              <Info>
                <Score>{item.score}</Score>
                <Rating>{item.rated}</Rating>
              </Info>
            </Card>
          )
        })}
    </AnimeCardWrapper>
  );
}

React Router の history API を使用してコンポーネントをレンダリングしようとしましたが、その時点で使用していたコンポーネントでレンダリングされてしまいました。つまり、ホームページで検索すると、検索結果がすべてのホームページ コンテンツとともにホームページに表示されます。そのため、リダイレクトを使用してみましたが、この問題が発生しました。

この投稿を参照して転がりましたが、役に立ちませんでした。