Frontend/React
[ 리액트(React) ] Route에서 props 전달이 안될 때
YWTechIT
2021. 4. 28. 16:55
728x90
⚡️ 구현 팁
React Router를 사용할 때 props
가 정상적으로 전달되지 않으면 어떤 component
에 props
를 주고있는지 확인해보자.
나는 1번과 같이 코드를 간결하게 작성하려고 한 줄로 작성했다가 왜 안되나 했더니 Route
컴포넌트에 props
를 전달해주는 코드기 때문이다.
import Loading from "../pages/Loading";
import React, { useState } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
const App = () => {
const [score, setScore] = useState(0); // declare useState
return(
// (X)
<Route path="/loading" component={Loading} score={score} />
// (O)
<Route path="/loading">
<Loading score={score}></Loading>
</Route>)}
- 1번 방법으로 작성했을 때
- 2번 방법으로 작성했을 때
반응형