[Inflearn][JohnAhn] 노드 리액트 기초 (20)

#20

• cd client에서 npm install react-router-dom --save 설치

• npm list로 react-router-dom 버전 확인 후 (나의 경우에는 v6이지만 강의가 v5를 사용하기 때문에) 링크로 들어가서 v5의 Relative Routes and Links의 v6를 참고하였다.

• import로 사용할 페이지 불러와주고 App 함수 수정해주었다.

• 사용하지 않는 구문은 반드시 주석 처리 해주어야 오류가 안 난다.

• 다음은 v5인 강의를 들으며 react v6에 맞게 작성한 코드의 최종본

  client/src/App.js===============
  //import logo from './logo.svg';
  import './App.css';
  // https://reactrouter.com/en/main/upgrading/v5 의 Relative Routes and Links의 v6 참고
  import {
    BrowserRouter,
    Routes,
    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 (
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<LandingPage />} />
          <Route path="/login" element={<LoginPage />} />
          <Route path="/register" element={<RegisterPage />} />
        </Routes>
      </BrowserRouter>
    );
  }
  
  export default App;