Javascript 如何在React中将数据从单击的组件从一个路由传递到另一个路由？

我正在开发一个视频游戏搜索应用程序，它使用React路由器从GiantBomb API获取数据。在SearchGames组件上完成搜索后，它将通过游戏组件从API返回游戏列表。我一直想弄清楚如何使用路由器将您单击的列出的游戏的数据详细信息传递给GamesDetail组件。我认为我不能使用道具来实现这一点，因为包含所有细节的单独视图既不是父组件也不是子组件。我希望我的要求有道理

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Nav />
          <div className="container">
            <Switch>
              <Route exact path="/" component={MainPage} />
              <Route exact path="/games" component={GameSearch} />
              <Route exact path="/about" component={About} />}
              <Route exact path="/details" component={GamesDetails} />}
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

class Search extends Component {
      constructor(props) {
        super(props);
        this.state = {
          title: "",
          games: []
        }
      }

  updateInput = (event) => {
    this.setState({
      title: event.target.value
    });
  }

  handleGames = (search) => {
    const proxyUrl = "https://cors-anywhere.herokuapp.com/";
    const key = "8cd10a7136710c1003c8e216d85941ace5a1f00e";
    const endpoint = `https://www.giantbomb.com/api/search/?api_key=`;
    const url = proxyUrl + endpoint + key + `&format=json&resources=game&query=${search}&limit=30`;

    fetch(url)
      .then(res => res.json())
      .then(data => {
        const response = data.results;
        console.log(response);
        response.forEach(game => {
          this.setState(prevState => ({
            games: prevState.games.concat(game)
          }))
        });
      });

    this.setState({
      games: []
    })

  }

  handleSubmit = (e) => {
    const { title } = this.state;

    e.preventDefault();

    if (!title) {
      return;
    } else {
      this.handleGames(title);
    }

  }

  render() {
    const { games } = this.state;
    return (

      <div className="App">
        <div className="search-bar">
          <form>
            <input
              className="input-field"
              type="text"
              placeholder="Search Game"
              onChange={this.updateInput}
            />
            <button
              className="search-button"
              onClick={this.handleSubmit}
            >Search</button>
          </form>
        </div>
        <div className="container">
          {games.length > 0 ? (
            games.map(game => {
              return <Game
                key={game.id}
                icon={game.image.icon_url}
                gameTitle={game.name}
              />
            })
          ) : (
              console.log(this.state.title)
            )
          }


        </div>
      </div>

    );
  }
}

const Game = (props) => {
  const { icon, gameTitle } = props;
  return (
    <div className="games-container">
      <div className="game-box">
        <img src={icon} alt="icon" />
        <Link to="/details">
          <p><strong>{gameTitle}</strong></p>
        </Link>
      </div>
    </div>
  );
}

const GameDetails = (props) => {
  const { icon, release, genres, summary} = props;
  return (
    <div className="details-content">
      <div className="box-art">
        <img src={icon} alt="box art" />
      </div>
      <div className="game-info">
        <h1>Game Details</h1>
        <div className="release-date">
          <h3>Release Data</h3>
          <p>{release}</p>
        </div>
        <div className="genres">
          <h3>Genres</h3>
          <p>{.genres}</p>
        </div>
        <div className="summary">
          <h3>Summary</h3>
          <p>{summary}</p>
        </div>
      </div>
    </div>
  );
}

---

您应该能够通过使用链接来实现此目的，该链接将公开一个可传递给结果路由的状态：

这是一个正在实施的计划

---

希望这有帮助

哇，太谢谢你了！这就更有意义了，它就像一个符咒。非常感谢！

// ...
// pass game object to Game component
// if you are passing game, you probably don't need other props explicitly passed
{games.length > 0 ? (
  games.map(game => {
    return <Game
      key={game.id}
      game={game}
      icon={game.image.icon_url}
      gameTitle={game.name}
    />
  })
 ) : (
   console.log(this.state.title)
 )
}

// ...

const Game = (props) => {
  const { icon, gameTitle, game } = props;

  return (
    <div className="games-container">
      <div className="game-box">
        <img src={icon} alt="icon" />
        <Link to={{ pathname: "/details", state: { game } }}>
          <p><strong>{gameTitle}</strong></p>
        </Link>
      </div>
    </div>
  );
}

const GamesDetails = (props) => {
  const { image: { icon_url: icon }, release, genres, summary } = props.location.state.game;

  return (
    <div className="details-content">
      <div className="game-info">
        <h1>Game Details</h1>
        <div className="box-art">
          <img src={icon} alt="box art" />
        </div>
        <div className="release-date">
          <h3>Release Data</h3>
          <p>{release}</p>
        </div>
        <div className="genres">
          <h3>Genres</h3>
          <p>{genres}</p>
        </div>
        <div className="summary">
          <h3>Summary</h3>
          <p>{summary}</p>
        </div>
      </div>
    </div>
  );
}