react-router的使用方法

Question

I'm building a movie app that pulls data from themoviedb API. Right now, on the home page, I have a search form where I type the movie I want to look for. Then below, I display the result of the movies returned with a button that takes you to a page that displays more info about a particular movie.

My issue is with the routing. How do I do it in such a way that when I'm on the movie-details page, the search and results components are not displayed

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

Your <Result /> component is outside of the router, so it's always being displayed. A quick fix here is to move it inside the router, like so:

    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