[React] - Router 1

react-router-dom 설치

$ npm install react-router-dom@6

setting

// index.js

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>
);

 

 

 

라우터로 페이지 나누기

// App.js

import { Routes, Route, Link } from 'react-router-dom'

function App(){
  return (
    (...생략)
    <Routes>
      <Route path="/url경로" element={ HTML 코드 } />
      <Route path="/" element={ <div>main</div> } />
      <Route path="/detail" element={ <div>detail</div> } />
      <Route path="/about" element={ <div>about</div> } />
    </Routes>
  )
}

 

 

(맛없는) 페이지 이동 버튼

<Link to="/">Home</Link>
<Link to="/detail">Detail</Link>

 

 

(맛있는) 페이지 이동 기능 - useNavigate()

import { ...생략 , useNavigate } from 'react-router-dom'

• 변수 생성하고 클릭이벤트에 함수 붙여놓기

function App(){
  let navigate = useNavigate()
  
  return (
    (...생략)
    <button onClick={()=>{ navigate('/detail') }}>Detail</button>
  )
}

 

[참고]

함수의 인자로 url 경로 대신 -1 을 넣으면 => 이전 페이지로 가기

함수의 인자로 url 경로 대신 1 을 넣으면 => 다음 페이지로 가기

 

 

 

 

404 페이지 처리

• 맨 밑에 만들어 두어야 함 (* 때문에)

<Route path="*" element={ <div>없는페이지임</div> } />

 

 

 

Nested routes - Outlet

• Outlet은 nested routes안의 요소들을 어디에 보여줄지 표기하는 곳
• 동적인 UI를 만드는 방법 중 하나

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>member</div> } />
  <Route path="location" element={ <div>location</div> } />
</Route>

function About(){
  return (
    <div>
      <h4>about페이지임</h4>
      <Outlet></Outlet>
    </div>
  )
}

 

 

 

 

드뎌 창맨이의 크핏 체험,, 7 라운드 하고 둘 다 몸져 누웠지만

너 내 크핏 동료가 되어라,,

이대로 2학기 플젝까지 부시자 화이팅~!