'Switch' is not exported from react-router-dom' / All component children of <Routes> must be a <Route> or <React.Fragment> 에러 해결법

<참고 사이트> React Router

  export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>
        <hr />
         <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

<Switch> 대신 <Routes>로 변경한다

현재 버전의 react-router-dom(12/7 기준 ver 6.0.2)을 사용중이라면, 위의 코드처럼 <Switch>를 쓰지 못한다.
공식 문서에 의하면 지난 버전이후로 <Switch> 대신 <Routes> 를 사용한다고 되어있다.
이 때 한 가지 더 변경을 해주어야 한다. 그렇지 않으면 다음과 같은 에러를 보게 된다.

<Routes> 의 자식은 무조건 <Route> 혹은 <React.Fragment> 이여야 한단다. (까다로운 것...) 즉 <Home/> 컴포넌트 같이 사용자 정의 컴포넌트를 Routes 안에 바로 작성하지 못한다.

결국 정의한 컴포넌트는 <Route> 내부의 element 요소로 작성을 해주어야 한다. (속성 역시 component={} -> element={} 로 변경되었다고 함)

<Routes> 내부에서 단독적으로 정의한 컴포넌트는 <Route>의 element 요소로 포함시켜야 한다

<Routes>
  <Route exact path="/" element={<Home/>}/>
  <Route path="/about" element={<About/>}/>
  <Route path="/dashboard" element={<Dashboard/>}/>
</Routes>

마지막 <Switch> 부터 이렇게 바꾸면 정상적으로 실행되는 화면을 볼 수 있다.