react-router的使用方法

Question

我正在構建一個電影應用程序，它從themoviedb API 中提取數據。 現在，在主頁上，我有一個搜索表單，我可以在其中輸入我想要查找的電影。 然后在下面，我用一個按鈕顯示返回的電影的結果，該按鈕將您帶到一個頁面，該頁面顯示有關特定電影的更多信息。

我的問題是路由。 我如何做到這一點，當我在movie-details頁面上時，不顯示search和results組件

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import Navbar from "./navbar";
import Search from "./search";
import Result from "./result";
import Details from "./details";
import "./App.css";
import axios from "axios";

class App extends Component {
  state = {
    searchTerm: "",
    movies: []
  };

  onSearch = e => {
    e.preventDefault();
    this.setState({ searchTerm: e.target.value });
  };

  handleSubmit = async e => {
    e.preventDefault();
    const result = await axios.get(
      `https://api.themoviedb.org/3/search/movie?query=${this.state.searchTerm}&page=1&api_key=6f7ad5c4744feea1ee5508d2e56232c4`
    );
    this.setState({movies: result.data.results})
    console.log(result.data.results);
  };

  render() {
    return (
      <div className="container">
        <Navbar />
        <Switch>
          {/* <Search handleSearch={this.onSearch} /> */}
          {/* <Route exact path="/" component={Search}  handleSearch={this.onSearch} handleSubmit={this.handleSubmit}/> */}
=          <Route
            exact
            path="/"
            render={props => (
              <Search
                {...props}
                handleSearch={this.onSearch}
                handleSubmit={this.handleSubmit}
              />
            )}
          />
          <Route path="/movie/" component={Details} />
          <Route path="/" component={Result} />
        </Switch>
        <Result movies={this.state.movies}/>
      </div>
    );
  }
}

export default App;

https://codesandbox.io/s/github/peoray/movies-info

Answer 1

你的<Result />組件在路由器之外，所以它總是被顯示。 這里的一個快速解決方法是將其移動到路由器內部，如下所示：

    return (
      <div className="container">
        <Navbar />
        <Switch>
          {/* <Search handleSearch={this.onSearch} /> */}
          {/* <Route exact path="/" component={Search}  handleSearch={this.onSearch} handleSubmit={this.handleSubmit}/> */}
          <Route
            exact
            path="/"
            render={props => (
              <>
                <Search
                  {...props}
                  handleSearch={this.onSearch}
                  handleSubmit={this.handleSubmit}
                />
                <Result movies={this.state.movies} />
             </>
            )}
          />
          <Route path="/movie/" component={MovieDetails} />
        </Switch>
      </div>
    );

https://codesandbox.io/s/todo-app-r38v5