react-router-dom

다른 웹사이트들을 보다보면
/페이지이름 이런식으로 추가페이지를 생성함.
react를 사용하지 않고 그냥 html로 작성한다고 하면
페이지이름 의 html파일을 만들어야 했었는데
React는 하나의 html파일만 사용하기 때문에
다른 페이지 요청시 그냥 <div>를 갈아치우는 방식을 사용함.
이래서 더 부드럽고 로딩없는 웹사이트가 되는듯.
직접짤수도 있다고 하는데 react-router-dom을 구현하는게 일반적이라고함

설치

npm install react-router-dom@6 

index.js
<BrowserRouter>로 <App/>감싸줘야함.

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

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

App.js

<Route path="/detail" element={<Detailpage />} />

페이지 이동 버튼 만들기

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

페이지 이동 기능 만들기 (navigate)

import { useNavigate } from 'react-router-dom'
function App(){
  let navigate = useNavigate()
  
  return (
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
  )
}

404페이지 만들기 (없는 페이지 예외처리)

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

Nested routes(route안에 route)

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

Outlet이라고 달아줘야 Nested routes 요소들이 다 보임

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