将 props 传入组件进行渲染

Question

// 警告：无法读取未定义的属性（读取“参数”）

//我尝试从movielist.js获取movie_id来查看movie.js上的单个电影onclicking view review //基本上我的错误是无法将道具传递给movie.js

//在导航/index.js 中

import { BrowserRouter as Router, Routes, Route, useParams} from "react-router-dom";
import Navbar from './navbar';
import MovieList from "../components/movie-list"
import Movie from "../components/movie"

const Nav = () => {
    return (
        <Router>
            <Navbar/>
            <Routes>
                <Route exact path={'/'} element={<MovieList/>}/>
                <Route path='/movies/:id/' element={<Movie props={useParams()} />} />
        </Routes>
    </Router>
)}

//在movielist.js中

import React, {useState, useEffect} from 'react'
import MovieDataService from "../services/movie"
import { Link } from 'react-router-dom'

const MovieList = () => {
        ....
  return (
    <div>
        ....
     <div>
      {movies.map((movie)=>{
        return(
          <div className="card" key={movie._id}>
            <div className="card-container">
              <div className='card-img'>
                <img src={movie.poster+"/100px180"} alt=""/>
              </div>
              <div className="card-body">
                <h1>{movie.title}</h1>
                <h2>Rating:{movie.rated}</h2>
                <p>{movie.plot}</p>
                <Link to={"/movies/"+movie._id}>View Review</Link>
              </div>
            </div>
          </div>
        );
      })}
    </div>
</div>

) }

// 在movie.js中

import React, { useState, useEffect } from 'react'
import MovieDataService from '../services/movie'
import { Link } from 'react-router-dom'

const Movie = (props) => {


useEffect(()=>{
getMovie(props.match.params.id)
},[props.match.params.id]) //won't call getMovie Multiple times unless id is updated.

return (
<div>
  <div className="card-container">
    <div className='card-img'>
      <img src={movie.poster+"/100px250"} alt=""/>
    </div>
    <div className="card-body">
      <h1>{movie.title}</h1>
      <p>{movie.plot}</p>
      {props.user && <Link to={"/movies/"+props.match.params.id+"/review"}>Add Review</Link>
      }
    </div>
  </div>
      );
    })}
  </div>
</div>

) }

Answer 1

使用useParams()钩子获取 url 参数。

const {id} = useParams()

useEffect(()=>{
getMovie(id)
},[id])

到处都用id替换props.match.params.id