[ 리액트(React) ] Route에서 props 전달이 안될 때

⚡️ 구현 팁

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. 1번 방법으로 작성했을 때
   
   
2. 2번 방법으로 작성했을 때