[React] Routing

·2022년 9월 27일
0

React

목록 보기
3/3

✧ Routing ✧

✧ 기본 세팅


  1. 터미널에 npm install react-router-dom@6 입력

  2. index.js → import { BrowserRouter } from "react-router-dom";<BrowserRouter> <App / > </BrowserRouter>

    import { BrowserRouter } from 'react-router-dom';
    
    <BrowserRouter>
            <App /> 
    </BrowserRouter>

    ⇒ APP이라는 친구에 대해서 라우팅을 사용할거야 !

  3. App.js → import { Routes, Route } from "react-router-dom";

  4. <Routes> 안에 <Route path=”” element={}></ Route> 넣기

✧ 기타 Issues


  • Switch → Routes 이름 변경
  • exact 이제 없음.

  • a href 대체
  • 페이지가 리로드되지 않음.
  • NavLink?
    • active 라는 class 가 생성됨
    • 사용자가 현재 자신이 어떤 페이지에 위치하고 있는지 직관적으로 이해할 수 있게 함

✧ HashRouter


  • BrowserRouter 와 다르게 주소 안 바뀜

  • 페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 useNavigate 사용
    • Link 와 다른 점: 함수 호출을 통해 페이지를 이동 → 특정 조건을 충족해야만 페이지 이동을 하도록 할 수 있음

+)

module.css 를 써야 class 가 같은 css 전체적용 방지할 수 있을듯.

0개의 댓글