[React] 최신버전 Route 수정법(Route, component->element, {<Home />}

Route를 작성할 때 반드시 Routes로 Route를 감싸주어야 한다...
즉, 가장 큰 부분은 BrowserRouter로 감싸고, 그 안에 Routes로 감싸고 그 안에 Route를 써야하는 것이다. 또, component 대신에 element를 써줘야 하고, 예전에는 그냥 페이지 컴포넌트를 써서 페이지를 라우팅했다면 지금은 중괄호 안에 페이지 컴포넌트를 써줘야 한다.

1. 우선 BrowserRouter, Route, Routes를 모두 import해주고,

import { BrowserRouter, Route, Routes } from 'react-router-dom';

2. 그 다음 component를 element로 바꿔주고,

<Route exact path="/" element={HomePage} />
<Route path="/login" element={LoginPage} />

3. 마지막으로 페이지 랜더링 할 때 {} 이렇게 중괄호 안에 페이지 컴포넌트들을 써 주어야 한다!!!

import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import HomePage from './pages/HomePage';
import LoginPage from './pages/LoginPage';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route exact path="/" component={HomePage} />
          <Route path="/login" component={LoginPage} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;