useParams사용시 props전송 안되는 문제.

[신원정]

App.js
<Routes>
        <Route path="/movie/:id" element={<Movie movies={movies} loading={loading}/>} />
</Routes>


Movie.js
import { useParams } from 'react-router-dom';

function Movie(props) {
    let {id} = useParams();
    console.log(props)
    return (
        <div>
            {props.loading ? <h1>Loading...</h1> : null}
            <div>< img src={props.movies[id].medium_cover_image} alt="" />{props.movies[id].title}</div>
        </div>
    )
}


맨 처음 페이지를 열고 http://localhost:3000/movie/0로 들어가면 props가 전달돼서 데이터가 뜹니다.
그런데 다시url을 쳐서 들어가면 그때부턴 loading은 전송되는데 movies가 전송되지 않습니다ㅠ

[codingapple]

직접 url 입력해서 새로고침하면 state가 리셋되어서 movies라는 state도 초기화되어서 그럴 수도 있습니다

[글쓴이]

글