Page Routing이란

Multi-page Application (정적 사이트)

기존 html을 클라이언트 측에 전송하는 것이다. 즉,html 파일과 데이터를 조립해서 전송을 하게 된다. 초기 로딩 속도 빠르다.

Single-page Application (client side-rendering)

client측에서 하나의 페이지를 사용한다. 페이지이동이 쾌적하고 빠르다.

리액트 라우팅 사용하기

1.최상위 단에 BrowserRouter
2.Routes에는 Route들이 자식들이 있다
3.Route는 path와 element로 매핑한다.

import {BrowserRouter, Route, Routes} from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>동규의 라우팅 공부 </h2>
        <Routes>
          <Route path='/' element={<Home/>}/>
          <Route path='/new' element={<NEW/>}/>
          <Route path='/diary' element={<Diary/>}/>
          <Route path='/edit' element={<Edit/>}/>
        </Routes>
        <a href='/new'>new로 이동</a>
        <br/>
        <RouteTest/>
      </div>
    </BrowserRouter>
  );
}

4.Link를 통해서 연결

import { Link } from "react-router-dom"
const RouteTest = ()=> {
    return(
           <>
            <Link to={'/'}>home</Link>
            <br/>
            <Link to={'/diary'}>diary</Link>
            <br/>
            <Link to={'/new'}>new</Link>
            <br/>
            <Link to={'/edit'}>edit</Link>
           </>
        );
};
export default RouteTest;