REST API 게시판 만들기(2) - React Router 구현

react-router 설치

npm install react-router-dom

App.js 작성

import './App.css';
import{BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Home from "./Home";
import CreatePost from "./CreatePost";
import PostDetail from "./PostDetail";
import PostEdit from "./PostEdit";

function App() {
  return (
      <Router>
        <div className="App">
          <Routes>
            <Route path={"/"} element={<Home/>}/>
            <Route path={"/create"} element={<CreatePost/>}/>
            <Route path={"/post/:id"} element={<PostDetail/>}/>
            <Route path={"/post/edit/:id"} element={<PostEdit/>}/>
          </Routes>
        </div>
      </Router>

  );
}

export default App;

// / - post list
// /create - post create
// /edit/:id - post edit

4개의 js파일 추가

• Home.js

// Home.js

let Home = () => {
    return(
        <div>
            <h1>Home</h1>
        </div>
    )
}

export default Home;

• CreatePost.js

// CreatePost.js

let CreatePost = () => {
    return(
        <div>
            <h1>Create Post</h1>
        </div>
    )
}

export default CreatePost;

• PostDetail.js

// PostDetail.js

let PostDetail = () => {
    return(
        <div>
            <h1>Post Detail</h1>
        </div>
    )
}

export default PostDetail;

• PostEdit.js

// PostEdit.js

let PostDetail = () => {
    return(
        <div>
            <h1>Post Detail</h1>
        </div>
    )
}

export default PostDetail;