React-Router-Dom v6.0.1 이슈

현재 react-router-dom이 6.0.1 버전으로 업그레이드 되면서
<Route> 를 <Routes> 로 wrapping 하지 않으면 에러가 발생한다.

  Error: A <Route> is only ever to be used as the child of <Routes> element 

v5의 <Switch / > 가 업그레이드 되어
v6의 <Routes / > 로 감싸주는 것이 필수가 되었기 때문인데
아래와 같이 수정이 필요하다

AS-IS @5.2.0

<BrowserRouter>
  // <Switch> 생략 가능
  <Route exact path="/"  component={Home} />
  <Route path="/todos" exact component={Todos} />
  <Route path="/users" exact component={Users} />
</BrowserRouter>

TO-BE @6.0.1

  <BrowserRouter>
    <Routes> // 필수
      <Route exact path="/" element={<Home />}></Route>
      <Route path="/todos" element={<Todos />}></Route>
      <Route path="/users" element={<Users />}></Route>	
    </Routes>
  </BrowserRouter>

그런데 이렇게 Routes 로 감싸주어도 컴포넌트 렌더링이 제대로 되지 않아 빈 화면이 나온다면
5.2.0 으로 다운그레이드 하자.

npm i react-router-dom@5.2.0