React Router props값 전달할 경우 params값을 받는 법.

 <BrowserRouter>
                <Switch>
                <Route 
                    exact path="/" 
                    render={() => <MainPage information={information} />} />
                <Route 
                    path="/:id" 
                    render={() => <Map information={information}   />}/>     
                </Switch>
            </BrowserRouter>

이와 같이 코드가 구성되 있을 경우 Map component에 information props값을 전달하였을 때, params 값을 받으려고 하였더니 오류가 발생하였다. 발생한 오류는 다음과 같다.

---

Cannot destructure property 'params' of 'props.match' as it is undefined.

이와 같은 오류 메시지가 떴고, console.log()를 통해 props값을 출력하였더니 information 값만 출력되었다.
그렇다면 props에 history, information, match값을 받으려면 어떻게 해야될까?

• 변경 사항

 <BrowserRouter>
                <Switch>
                <Route 
                    exact path="/" 
                    render={() => <MainPage information={information} />} />
                <Route 
                    path="/:id" 
                    render={(props) => <Map information={information}  {...props} />}/>     
                </Switch>
            </BrowserRouter>

코드를 이와 같이 고쳤더니,,,

props에 원하던 것들이 다 담겼다!
오늘 하루 이걸로 삽질했는데 그래도 답을 찾으니 한결 마음이 나아졌다.
아직 삽질할 것이 많이 남았으니 화이팅하자.

참고 사이트