I need send props to other component but always fail I don't know reason for this-CodePudding

I want to send props from app component to Home component.

class App extends Component {
  state = {
    movie: [],
    tv: [],
  }

  getTrending = async (mediaType) => {
    let allTrinding = await axios.get(`https://api.themoviedb.org/3/trending.${mediaType}/week?api_key=.....`);
    console.log(allTrinding);
  }

  componentDidMount() {
    this.getTrending("movie");
  }

  render() {
    return (
      <React.Fragment>
        <Navbar></Navbar>
        <Routes>
          <Route path="/home" exact render={props => <Home {...props} movie={this.state.movie} />} />
          <Route path="/movie" element={<Movie />} />
          <Route path="/tv" element={<Tv />} />
        </Routes>
      </React.Fragment>
    );
  }
}

https://i.stack.imgur.com/Di2hY.png

CodePudding user response：

Passing props to routed components works just as anywhere else in React, simply pass the props you need. The Route component has only the element prop taking a React.ReactNode, a.k.a. JSX, prop value.

Example:

<Routes>
  <Route path="/home" element={<Home movie={this.state.movie} />} />
  <Route path="/movie" element={<Movie />} />
  <Route path="/tv" element={<Tv />} />
</Routes>