[React] React-router-dom@5 버전에서 발생한 에러

발생 상황

React에서 Router를 설정하고 있었는데 에러가 발생했다.

Failed prop type: Invalid prop 'component' supplied to 'Route': the prop is not a valid React component
잘못된 props인 'component'가 Route에 제공되었다. 이 props는 유효한 React 컴포넌트가 아니다.

에러가 발생한 코드는 아래와 같다.

import { BrowserRouter as Router, Route } from "react-router-dom";
import Users from "./user/pages/Users";

const App = () => {
  return (
    <Router>
      {/* Route에 접속하려면 도메인 뒤에 path에 적용한 것을 입력해야함 */}
      {/* <Route path="/">
        <Users />
      </Route> */}
      <Route path="/" component={<Users/>} />
    </Router>
  );
};

export default App;

물론 아래처럼 'component' props를 사용하지 않고 Route의 오프닝 태그와 클로징 태그 사이에 넣어줘도 정상적으로 동작하지만 다른 방법을 확실히 알아가는 것이 중요하니 이 방법으로 해보려 했다.

에러 원인

에러 메세지에서 힌트를 준 것처럼 Route에 올바르지 않은 props를 전달했거나 props에 올바른 값을 전달하지 못해서 발생한 에러이다.

문제 해결

우선 React-router-dom 공식 문서에서 올바른 props인지 확인해봤다.
내 React-router-dom은 @5.3.4 버전이기 때문에 @5.x의 공식문서를 확인했다.

component

A React component to render only when the location matches. It will be rendered with route props.
location이 일치할 때만 이 React 컴포넌트를 렌더한다. 이것은 Route props로 렌더할 것이다.

우선 component라는 props는 있기 때문에 사용할 수 있다.
그러면 props에 넣는 값이 잘못된 것이니 공식 문서에서 사용한 예시를 봤다.

내가 한 Route의 component porps의 값은 <User />이다.

<Route path="/" component={<Users />} />

하지만 React-router-dom의 component 사용 예시는 아래와 같다.

// import한 객체를 사용하고 있다...?
<Route path="/user/:username" component={User} />

나는 User라는 컴포넌트를 JSX 구문으로 넣었고 React-router-dom의 예시는 컴포넌트를 import한 User 객체 자체를 값으로 적용했다.

이유를 몰랐는데 다른 에러 메세지에 완전 직접적인 힌트를 주고 있었다...

type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: . Did you accidentally export a JSX literal instead of a component?
타입이 유효하지 않습니다. -- 문자열 또는 클래스/함수가 필요하지만 <Users />를 얻었습니다. 컴포넌트 대신 JSX 리터럴을 실수로 보냈습니까?

나는 JSX 구문을 값으로 넣었는데 component props의 값으로는 문자열이나 클래스/함수가 필요하다고 한다.

그래서 아래처럼 고쳐주면 해결!

import { BrowserRouter as Router, Route } from "react-router-dom";
import Users from "./user/pages/Users";

const App = () => {
  return (
    <Router>
      <Route path="/" component={Users} />
    </Router>
  );
};

export default App;

앞으로 에러 메세지를 자세히 살펴보는 습관을 길러야겠다... 😅