我已经设置好上下文，并且我有一个在提交表单handleSubmit后立即运行的函数。提交表单时，我希望结果显示在单独的页面dashboard上。我正在使用history.push（）。

我的表格包装在withRouter HOC中。

提交表单时，我收到“ props.history未定义”

我还有另一个正在使用match.params的函数，并且我也变得不确定。所以我假设它与React Router有关。

我认为也许我的上下文文件是需要用withRouter HOC包装的文件，但是该文件有两个导出文件。

我的上下文提供者

import React,{ useState,useEffect,createContext } from 'react'

const AnimeContext = createContext()

const API = "https://api.jikan.moe/v3"


const AnimeProvider = (props) => {
  const urls = [
    `${API}/top/anime/1/airing`,`${API}/top/anime/1/tv`,`${API}/top/anime/1/upcoming`,]

  // State for Anime search form
  const [dataItems,setDataItems] = useState([])
  const [animeSearched,setanimeSearched] = useState(false)

  // Fetch searched Anime
  async function handleSubmit(e) {
    e.preventDefault()

    const animeQuery = e.target.elements.anime.value
    const response = await fetch(`${API}/search/anime?q=${animeQuery}&page=1`)
    const animeData = await response.json()

    setDataItems(animeData.results)
    setanimeSearched(!animeSearched)

    props.history.push('/dashboard')
  }


  return (
    <AnimeContext.Provider value={{
      topTv,setTopTv,topAiring,setTopAiring,topUpcoming,setTopUpcoming,dataItems,setDataItems,animeSearched,setanimeSearched,fetching,anime,fetchTopAnime,fetchAnimeDetails,handleSubmit
    }}>
      {props.children}
    </AnimeContext.Provider>
  )
}

export { AnimeProvider,AnimeContext }

我的 SearchForm 组件

import React,{ useContext } from 'react';
import { withRouter } from 'react-router-dom'
import styled from 'styled-components'
import AnimeCard from './AnimeCard/AnimeCard';
import { AnimeContext } from '../store/AnimeContext'


const SearchForm = () => {
  const { dataItems,handleSubmit } = useContext(AnimeContext)

  return (
    <div>
      <Form onSubmit={handleSubmit}>
        <Input
          type="text"
          name="anime"
          placeholder="Enter title"
        />
        <FormButton type='submit'>Search</FormButton>
      </ Form>
      {animeSearched
        ?
        <AnimeCard
          dataItems={dataItems}
        />
        : null}
    </div>
  )
}

export default withRouter(SearchForm)