Блог

В App.js компонент, я извлекаю данные в useEffect. В URL мне нужен идентификатор фильма, который я пытаюсь получить с помощью useParams, но я не смог получить идентификатор. Я получаю ошибку типа: невозможно прочитать свойство ‘match’ неопределенного.

 function App() {
  const [credits, setCredits] = useState("");
  const { id } = useParams()
  useEffect(() => {
    const creditData = async () => {
      try {
        const credits = await Axios.get(
          `${baseURL}/movie/${id}/credits?api_key=${API_KEY}`
        );
        const credit = credits.data;
        setCredits(credit);
      } catch (error) {
        console.log(error);
      }
    }
    return creditData()
  }, [id])

  return (
    < BrowserRouter >
      <Header />
      <Switch>
        <Route exact path='/' component={Landing} />
        <Route path='/movie/:id/cast' render={() => <Cast credits={credits} />} />
        <Route path='/movie/:id' render={() => <MovieDetail credits={credits} />} />
      </Switch>

    </BrowserRouter>
  );
}

export default App;
 

Здесь вы не получите доступ к идентификатору с помощью useParams, потому что вы можете использовать useParams только в компоненте, который является дочерним компонентом вашего компонента маршрутизатора, но здесь в вашем примере приложение является родительским.

таким образом, в основном компонент маршрутизатора будет вводить только контекст, содержащий совпадение, найденное в дереве ниже, и который будет сопоставлен с помощью хука useParams с помощью хука useContext.

Надеюсь, вы это поняли.