[React] 게시판 만들기 #3 : 페이지 이동을 위한 Route 설정

• 리액트로 게시판 만들기
  1. VSCode 와 Node 설치하기
  2. 리액트 프로젝트와 네비게이션 생성하기
  3. 페이지 이동을 위한 Route 설정하기
  4. Axios 설치 및 사용해보기
  5. Axios 를 이용하여 게시판 목록 만들기
  6. Axios 를 이용하여 게시판 상세보기 만들기
  7. Axios 를 이용하여 게시판 작성 만들기
  8. Apollo GraphQL 을 설치 및 사용해보기
  9. Apollo GraphQL 을 이용하여 게시판 목록 만들기
  10. Apollo GraphQL 을 이용하여 게시판 상세보기 만들기
  11. Apollo GraphQL 을 이용하여 게시판 작성 만들기

---

React 소스코드는 여기 에서 확인 가능합니다.

개발에 사용한 Restful API 는 여기 에서 확인 가능합니다.

---

페이지 생성

🛠 pages/Home.js

import React, { Component } from 'react';

class Home extends Component {

    render() {
      return (
          <div>
              <h3> Home </h3>
          </div>
      );
    }
  }
  
  export default Home;

Route 설정

App.js 파일에서 각 path 에 대한 element 를 설정한다.

🛠 App.js

import React from 'react';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Navbar from'./components/Navbar';
import Home from'./pages/Home'; // 추가 된 내용
import Station from'./pages/station/Station';
import Voc from'./pages/voc/Voc';

function App() {

    return (
      <>
      <Router>
        <Navbar />
        <Routes>
          <Route exact path='/' element={<Home />} />
          <Route path='/station' element={<Station />} />
          <Route path='/voc' element={<Voc />} />
        </Routes>
      </Router>
      </>
    );
}
export default App;

정상적으로 페이지가 표시되는걸 확인 할 수 있다.