react-router-dom이 v6으로 업데이트 되면서 일부 코드 사용이 변경되었다.
기존 코드를 사용하려면 v5를 다운받아 작성하는 방법도 있지만, 변경된 코드를 쓰는 편이 업그레이드 된 이후 버전을 쓰는데 편리하기 때문에 새로운 버전을 공부해보자.

변경된 부분

Switch -> Routes

기존 <Router> 내부에서 <Routes>를 감싸던 <Switch> 태그가 <Routes>로 변경되었다.

component -> element

Switch를 Routes로 변경하고 나니 아래와 같은 에러가 콘솔에 발생했다.

Uncaught Error: [Login] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Route에서 쓰던 옵션인 component가 element로 변경되었다.

기존(~v5)

<Router>
	<div>
		<Routes>
			<Route path="/login">
				<Login/>
			</Route>
			<Route path="/">
				<App/>
			</Route>
		</Routes>
	</div>
	<Box mt={5}>
		<Copyright/>
	</Box>
</Router>

변경(v6)

<Router>
	<div>
		<Routes>
			<Route path="/login" element={<Login/>}/>
			<Route path="/" element={<App/>}/>
		</Routes>
	</div>
	<Box mt={5}>
		<Copyright/>
	</Box>
</Router>

v6에서는 이 외에도 변경된 부분이 많지만 에러를 고치는 데 필요했던 부분만 간단하게 짚어봤다.