React Route 관련 오류 문제들

React 프로젝트를 개발하며 진행 중 Router관련 오류들이 굉장히 많이 나왔고
react-router-dom v6과 이전버전의 차이점이 많이 달랐다.

Router를 등록 시

Version5

<Switch>
    <Route path='/home' component={Home} />
    <Route exact path='/user' component={User} />
    <Route exact path='/user/list/:id' component={List} />
    <Route exact path='/user/reg' component={Reg} />
</Switch>

Version6

<Routes>
    <Route path='/home/*' element={<Home />} />
    <Route path='/user' element={<User />} />
    <Route path='/user/list/:id' element={<List />} />
    <Route path='/user/reg' element={<Reg />} />
</Routes>

차이

1. v5에서 Router를 등록할 때 Switch 내부에 해줬지만 v6에서는 Routes내부에 해주도록 변경

2. v5에서 경로에 컴포넌트를 등록할 때 component를 사용했지만 v6에서는 element속성 값을 사용

3. v5에서는 정확한 경로 지정위해 exact를 사용했지만 v6에서는 default로 exact가 적용됨

4. v5에서 하위 경로를 모두 포함해야 할 때 exact를 제외했지만 v6에서는 path에 등록하는 경로 뒤에 *를 붙임

또다른 오류

에러 내용

[]is not a Component. All component children of <Routes> must be a or <React.Fragment>

내용을 해석해봤을때 Home은 컴포넌트가 아니다. 모든 컴포넌트는 Routes또는 React.Fragment의 자식 컴퍼넌트여야 한다
라는 뜻인데

이전 버전에서는 Route의 자식으로 컴퍼넌트를 사용됐지만 6이후 부터는 안되는 것 같다.
대신 그부분을 Route 자체에서 element를 통해 컴퍼넌트 이름을 추가해주면 해결이 되었다.