React Router 설치하기

이전에 json-server db에 저장한 데이터를 확인하기 위한 페이지를 만들려고 한다. ㅎㅎ

 

그러려면 일단 React Router를 설치해야한다.

(npm install react-router-dom 실행하면 된다. ㅎㅎ)

 

- 관련 사이트

https://reactrouter.com 

Home v6.10.0

 

 

<설치 확인!>

 

 

설치가 끝나고 간단히 코드 작성!

App.js에 아래와 같이 작성해줬다. ㅎㅎ

import {useState} from 'react';
import axios from 'axios';
import {BrowserRouter as Router,
Routes,
Route,
Link
} from 'react-router-dom';

function App() {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  console.log('check');

  const onSubmit = () => {
    axios.post('http://localhost:3001/posts', {
      title: title,
      body: body
    });
  };

  return (
    <Router>
      <div>
        <Link to="/">Home</Link>
        <Link to="/blogs">Blogs</Link>
      </div>
      <Routes>
        <Route path="/">Home Page</Route>
        <Route path="/blogs" element={
        <div className="container">
            <div className="mb-3">
              <label className="form-label">Title</label>
              <input className="form-control" value={title} onChange={(e) => {
                setTitle(e.target.value)
              }} />
            </div>
            <div className="mb-3">
              <label className="form-label">Body</label>
              <textarea className="form-control" value={body} onChange={(e) => {
                setBody(e.target.value)
              }} />
            </div>
            <button className="btn btn-primary" onClick={onSubmit}>Post</button>
          </div>
        }>
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

 

onSubmit 함수에 localhost:3001은 json-server 포트를 3001로 해놓았기 때문에 이렇게 설정해줬다 ㅎㅎ