在另一个路由中显示搜索结果组件

Question

我正在使用 MovieDB API。我现在想在根路径上显示正在播放的电影，但在另一条路径中搜索结果。

我尝试将 history.push() 方法放入 handlesubmit，但它显示错误。这是代码。目前我在主页本身显示搜索结果组件。

App.js

import React, { Component } from "react";
import "./App.css";
import { BrowserRouter, Link, Switch, Route } from "react-router-dom";
import Nav from "./component/Nav";

import axios from "axios";

import { Provider } from "./context";
import Home from "./component/Home";
import SearchResult from "./component/SearchResult";
import MovieDetails from "./component/movieDetails";

class App extends Component {
  state = {
    movieList: [],
    searchResult: [],
    currentpage: 1,
    totalpage: 1,
    API_KEY: "c51081c224217a3989b0bc0c4b3d3fff"
  };
  componentDidMount() {
    this.getCurrentMovies();
  }

  getCurrentMovies = e => {
    axios
      .get(
        `https://api.themoviedb.org/3/movie/now_playing?api_key=${
          this.state.API_KEY
        }&language=en-US&page=${this.state.currentpage}`
      )
      .then(res => {
        this.setState({
          movieList: res.data.results,
          currentpage: res.data.page,
          totalpage: res.data.total_pages
        });
        console.log(this.state);
      });
  };

  getMovies = e => {
    e.preventDefault();
    const moviename = e.target.elements.moviename.value;
    axios
      .get(
        `https://api.themoviedb.org/3/search/movie?api_key=${
          this.state.API_KEY
        }&query=${moviename}`
      )
      .then(res => {
        this.setState({
          searchResult: res.data.results
        });
        console.log(this.state.searchResult);
      });

    console.log(this.router);
  };

  nextPage = () => {
    this.setState(
      {
        currentpage: (this.state.currentpage += 1)
      },
      () => console.log(this.state.currentpage)
    );
    this.getCurrentMovies();
  };

  prevPage = () => {
    if (this.state.movieList && this.state.currentpage !== 1) {
      this.setState(
        {
          currentpage: (this.state.currentpage -= 1)
        },
        () => console.log(this.state.currentpage)
      );
      this.getCurrentMovies();
    }
  };


  render() {
    const contextProps = {
      myState: this.state,
      getMovies: this.getMovies,
      nextPage: this.nextPage,
      prevPage: this.prevPage,

    };
    return (
      <Provider value={contextProps}>
        <BrowserRouter>
          <Nav />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/:id" component={MovieDetails} />
          </Switch>
        </BrowserRouter>
      </Provider>
    );
  }
}

export default App;

Home.js

import React, { Component } from "react";
import NowPlaying from "./NowPlaying";
import SearchResult from "./SearchResult";
import SearchBox from "./SearchBox";
class Home extends Component {
  state = {};
  render() {
    return (
      <div>
        <SearchBox />
        <SearchResult />
        <NowPlaying />
      </div>
    );
  }
}

export default Home;

SearchBox.js

import React, { Component } from "react";
import { MyContext } from "../context";
import { withRouter } from "react-router-dom";

class SearchBox extends Component {
  static contextType = MyContext;

  render() {
    return (
      <React.Fragment>
        <div className="jumbotron jumbotron-fluid">
          <div className="container" style={{ textAlign: "center" }}>
            <h1 className="display-4">Find your Movie</h1>
            <p className="lead">
              Find rating, descrips and much more of your fev. movie.
            </p>
            <form onSubmit={this.context.getMovies}>
              <input
                name="moviename"
                className="form-control mr-sm-2"
                type="search, submit"
                placeholder="Search"
                aria-label="Search"
                style={{ height: "50px" }}
              />
            </form>
          </div>
        </div>
        <div />
      </React.Fragment>
    );
  }
}

export default withRouter(SearchBox);

SearchResult.js

import React, { Component } from "react";
import Movie from "./movie";
import { withRouter } from "react-router-dom";
import { MyContext } from "../context";
import SearchBox from "./SearchBox";

class SearchResult extends Component {
  static contextType = MyContext;

  render() {
    return (
      <React.Fragment>
        <div className="container">
          <div className="row justify-content-center">
            {this.context.myState.searchResult.map(movie => {
              return <Movie id={movie.id} image={movie.poster_path} />;
            })}
          </div>

          {/* <button>Prev</button>
        <button>Next</button> */}
        </div>
      </React.Fragment>
    );
  }
}

export default SearchResult;

还有一件事。分页适用于正在播放的电影，但无法使其与搜索结果一起使用。请帮忙。

Answer 1

您可以像这样使用重定向传递数据：

<Redirect to={{
            pathname: '/movies',
            state: { id: '123' }
        }}
/>

您可以通过以下方式访问它：

this.props.location.state.id