[React] Warning: React does not recognize the `computedMatch` prop on a DOM element

Warning 코드

Warning: React does not recognize the computedMatch prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase computedmatch instead. If you accidentally passed it from a parent component, remove it from the DOM element.

 

react-router-dom을 사용할 때 위와 같은 오류가 뜰 때가 있었다.

기능에 문제는 없지만 오류 코드가 뜨는것이 불편했다.

검색 결과 해결 방법으로는

<Switch>
                <>
                {isLoggedIn ? (
                <div
                    style={{
                        maxWidth: 890,
                        width: "100%",
                        margin: "0 auto",
                        marginTop: 80,
                        display: "flex",
                        justifyContent: "center",
                    }}
                >
                    <Route exact path="/">
                        <Home userObj={userObj} />
                    </Route>
                    <Route exact path="/profile">
                        <Profile userObj={userObj} refreshUser={refreshUser}/>
                    </Route>
                </div>
                ): (<Route exact Path="/">
                    <Auth/>
                </Route>
                )}
                </>
            </Switch>

Switch 태그안에 Fragment 태그(<> </>)를 사용하면된다.

리액트 공식문서 발췌

The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.

 

React에서 합법적 인 DOM 속성 / 속성으로 인식되지 않는 소품으로 DOM 요소를 렌더링하려고하면 unknown-prop 경고가 발생합니다. DOM 요소에 허위 소품이 떠 다니지 않도록해야합니다.