无法解构 'undefined' 的 属性 'history'，因为它未定义。 --React.js

Question

我在 AddMovie 组件的路由器组件中使用了 'history' 对象。但是在三行之后，我再次使用它并给出了这个错误： 类型错误：无法解构 'undefined' 的 属性 'history'，因为它未定义。

 77 |    <Route path="/add" render = { ({history}) => (
 78 |   <AddMovie onAddMovieprop={(newMovie) => { this.addMovie(newMovie); history.push("/"); }} />
  79 | )}>
  80 | </Route>
> 81 | <Route path="/edit/:id" render = { ( props, {history} ) => (
     | ^  82 |   <EditMovie {...props} onEditMovieProp = {(id, updatedMovie) => { this.editMovie(id, updatedMovie); this.props.history.push("/"); }}/>
  83 |     )}>
  84 | </Route>

我该如何解决？第78行和第82行几乎一样怎么可能？

这是我的 App.js 代码的渲染部分：

render(){
    let filteredMovies = this.state.movies.filter(
      movie => { return (movie.name.indexOf(this.state.searchQuery.toLowerCase()) !== -1) }
    ).sort((a,b) => {
      return a.name > b.name ? 1 : b.name> a.name ? -1 : 0; 
    })
    return (
     <Router>
        <div className="App">
          <Switch>
            <Route path="/" exact render = {() => (
              <div className="container" >
                <Searcher searchMovieProp = {this.searchMovie} addHistoryProp = {this.addHistory} />
                <MovieList movies= {filteredMovies} removeMovieProp = {this.removeMovie} />
              </div>
            )}>
            </Route>
            <Route path="/add" render = { ({history}) => (
              <AddMovie onAddMovieprop={(newMovie) => { this.addMovie(newMovie); history.push("/"); }} />
            )}>
            </Route>
            <Route path="/edit/:id" render = { ( props, {history} ) => (
              <EditMovie {...props} onEditMovieProp = {(id, updatedMovie) => { this.editMovie(id, updatedMovie); history.push("/"); }}/>
                )}>
            </Route>
          </Switch>
        </div>
     </Router>
    );
  }

Answer 1

这是你需要做的：

<Route
  path="/edit/:id"
  render={({history, ...props}) => (
    <EditMovie
      {...props}
      onEditMovieProp={(id, updatedMovie) => {
        this.editMovie(id, updatedMovie);
        history.push("/");
      }}
    />
  )}
></Route>;

Answer 2

它给你错误，因为 this.props 在该行未定义 变化

this.props.history.push("/");

至

history.push("/")