#Error React Router 오류

React Router Dom 예제를 실행시 원하는 성곡적으로 컴파일 되었다고 떴는데 원하는 라우터로 이동하지 않는 오류가 발생했다.

이 문제는 react-router-dom 버전이 업그레이드 되면서 코드가 약간 바뀐것 같다.

기존코드

import React from 'react';

import {
	BrowserRouter as Router,
	Switch,
	Route,
	Link
}from "react-router-dom";

import LandingPage from './components/views/LandingPage/LandingPage'
import LoginPage from './components/views/LoginPage/LoginPage'
import RegisterPage from './components/views/RegisterPage/RegisterPage'

function App(){
	return (
		<Router>
			<div>
				{
					}
				<Switch>
					<Route exact path="/" component ={LandingPage} />
					<Route exact  path="/login " component = {LoginPage} />
					<Route exact  path="/register " component = {RegisterPage } />
				</Switch>
			</div>
		</Router>		
	);
}

export default App;

수정코드

import React from 'react';

import {
	BrowserRouter as Router,
  Routes,
	Route,
}from "react-router-dom";

import LandingPage from './components/views/LandingPage/LandingPage'
import LoginPage from './components/views/LoginPage/LoginPage'
import RegisterPage from './components/views/RegisterPage/RegisterPage'

function App(){
	return (
		<Router>
				<Routes>
					<Route path="/" exact ={true} element ={<LandingPage />} />
					<Route path="/login" element = {<LoginPage />} />
					<Route path="/register" element = {<RegisterPage />} />
				</Routes>
		</Router>		
	);
}

export default App;

제일 먼저 Switch가 사라지고 Routes로 대체된 것 같다. 또한 componnets에서 element로 그리고 {}요런식으로 넣어야 하는 것 같다!