[React] Routing

Routing

• react-router-dom 설치
  • npm i react-router-dom
  • npm i -D @types/react-router-dom
• react-router-dom
  • 라우터 타입(최상위)
    • BrowserRouter
    • HashRouter
    • MemoryRouter
  • 페이지 라우팅
    • Routes > Route
    • Routes는 여러 개 둘 수 있다.
• React Router (Navigate & useNavigate)
  • import
    • import { Navigate, useNavigate } from 'react-router-dom';
  • 페이지 강제 이동 (forward/redirect)
    • <Navigate to='<path>' state={} />
    • <Route path='/old-path' element={<Navigate to='/new-path'/>} />
• React Router (Nav)
  • Link (페이지 링크)
    • <Link to='/items' [replace | reloadDocument] />
  • NavLink
    • isActive callback 함수 제공 (children, className, style)
• NavLink Styling
  • styled-component & emotion
    • active 처리
      • Route의 path와 NavLink의 to가 일치하면 active 클래스를 자동으로 넣어준다.
  • classnames
    • Modue CSS + classnames 로 처리
      • Module CSS로 클래스 중복 막고, isActive 처리는 classnames로 처리
  • clsx
    • active 처리
      • css 파일에서 active 클래스 설정
      • 가장 단단 (클래스 중복은 상위 클래스로 설정)
• Router Hooks
  • useOutletContext
    • <Outlet context={{name: 'Hong'}} />
    • const outctx = useOutletContext<{ name: string}>();
  • useLocation & useParams
    • <Route path='/items/:id' element={<Item />}>
    • const { id } = useParams();
    • const location = useLocation();
    • const state = location.state as { x: number };
  • useSearchParams
    • const [searchParams, setSearchParams] = useSearchParams({});
• Layout
  • 하위 Route의 페이지 레이아웃 잡기
    • <Route path='/' element={<Compo />} />
    • <Route path='/items/:id' element={<Item />} />