[react-router-dom] useParams

What is useParams ?  

 

The useParams hook returns an object of key/value pairs of the dynamic params from the current URL that were matched by the <Route path>. Child routes inherit all params from their parent routes.

 

 

 

import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import MainImage from '../../LandingPage/Sections/MainImage'
import GridCards from '../commons/GridCards'


function MovieDetail(props) {
  const {movieId} = useParams()
  
  const [movieInfo, setMovieInfo] = useState([]);
  const [crew, setCrew] = useState([]);
  useEffect(()=>{

      const endpointCrew = `${API_URL}movie/${movieId}/credits?api_key=${API_KEY}&language=en-US&page=1`

      const endpointInfo = `${API_URL}movie/${movieId}?api_key=${API_KEY}`


      fetch(endpointInfo)
      .then(response =>response.json())
      //.then(response=>console.log(response))
      .then(response=>{
        console.log(response)
        setMovieInfo(response)

        })

        
    },[])

      return (
      <div className='detailWrap'>
        {/* mainImage */}
        <MainImage
        image={`${IMG_BASE_URL}w1280${movieInfo.backdrop_path}`}
        title ={ movieInfo.original_title}
        text={movieInfo.overview}
        ></MainImage>
        {/* //mainImage */}
        <div className='content'>
            {/* movieInfo */}
            <MovieInfo
                title = {movieInfo.original_title}
                ReleaseDate = {movieInfo.release_date}
                Revenue = {movieInfo.revenue}
                RunTime= {movieInfo.runtime}
                VoteAverage={movieInfo.vote_average}
                VoteCount={movieInfo.vote_count}
                Staus={movieInfo.status}
                Popularity={movieInfo.popularity}
            ></MovieInfo>
      
          {/* // movieInfo */}
          </div>
        <div className='btnWrap'>
          <button className='button'>Toggle Actor View</button>
        </div>
        
      </div>
  )
}

export default MovieDetail

import * as React from "react";
import { Routes, Route, BrowserRouter, useParams } from "react-router-dom";

import LandingPage  from "./components/LandingPage/LandingPage";
import LoginPage  from "./components/views/LoginPage/LoginPage";
import RegisterPage  from "./components/views/RegisterPage/RegisterPage";
import NavBar from './components/views/NavBar/NavBar';
import MovieDetail from "./components/views/MovieDetail/MovieDetail";

function App() {

  return (
    <div>
     
      <BrowserRouter>
      <NavBar></NavBar>
        <Routes>
          <Route exact path="/" element={<LandingPage />}> </Route>
          <Route exact path="/login" element={<LoginPage />}> </Route>
          <Route exact path ="/register" element={<RegisterPage />}> </Route>
          <Route exact path ="/movie/:movieId" element={<MovieDetail />}> </Route>
        </Routes>
      </BrowserRouter>
      
    </div>
  );
}




export default App;