[React] Router 라우터(feat.404 NotPage)

Route

라우팅이란?

주소창에 URL을 입력했을때 서버에서 요청된 URL에 해당하는 데이터를 전달하는것/ 요청한 URL에 따른 페이지 이동

리액트 라우터(React Router)

• React 의 라우팅 관련 라이브러리
• 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있다.
• 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다.

Router 컴포넌트 종류: BrowserRouter vs HashRouter

BrowserRouter

• 태그를 통해 to 속성에 이동할 경로를 추가하여 이동시킨다
• 새로고침하면 경로를 찾지 못해 에러가 발생한다.
• HTML5 History API를 사용한다.
• 주로 동적인 페이지에서 사용된다.
• HTML5를 지원하는 브라우저의 주소를 감지 한다.(HTML5 History API)
• 검색 엔진 최적화 / 새로고침, 주소값 접근 문제 해결을 위한 서버 추가적 세팅 필요

<BrowserRouter>
  <Link to="/">메인 페이지</Link>
</BrowserRouter>

// BrowserRouter 감싸주어 사용한다.

HashRouter

• 주소에 해쉬태그가 붙는다(#) -> index.html에서 index.html# 처럼 뒤에 붙는다. (www.domain.com/#/path )
• BrowserRouter와는 다르게 새로고침하여도 에러가 발생하지 않는다.
• 검색 엔진이 찾지를 못한다.
• 주로 정적인 페이지에서 사용된다.
• 배포시 편하며 어떤 브라우저든 잘 동작하지만 SEO (검색 엔진 최적화)가 되지 않아 실무에선 잘 사용하지 않는다.
• ex.관리자 페이지나 개인포폴 등

  <HashRouter>
    <Route path="/" />
  </HashRouter>

// HashRouter로 감싸주어 사용한다.

두가지 Router의 주요한 차이

BrowserRouter의 경우에는 새로고침 시, 해당 URL을 바탕으로 페이지를 새로 불러온다.

하지만 BrowserRouter는 Link태그를 사용하여 URL을 이동하며 페이지를 불러오는 것이 아닌 단순히 주소만 바꿔주며

컴포넌트들을 렌더링하는 역할을 한다. 그렇기에 새로고침을 하게 되면 해당 페이지를 찾지 못하기 때문에 에러가 발생한다.

HashRouter의 경우에는 새로고침 시, #(해쉬태그) 이전의 URL만 서버를 통해 불러오게 된다. 가장 맨 처음 페이지만 불러오기에

BrowserRouter와는 달리 에러가 발생하지 않게된다.

---

사용하기

현재 파일은 CRA 로 개발환경을 구성한 상태

npx-create-react-app 폴더명

React routet 설치법

npm i react-router-dom

App.js에 적용

import { BrowserRouter, Routes, Route } from 'react-router-dom'; //1.import

import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';

function App() {
  return (
    <div className='App'>
      <BrowserRouter> //2.BrowserRouter: 최상위 컴포넌트를 감싸주기
        <Routes> //3.Routes: Route들을 구성하는 부모 요소 설정  ()
          <Route path='/' element={<Home />} />  //3.해당 Route 설정
          <Route path='/about' element={<About />} />
          <Route path='*' element={<NotFound />} /> //4.404 Page 설정
        </Routes>
      </BrowserRouter>
    </div>
  );
}

404 Page는 맨 아래 위치

맨 아래에 위치시키는 이유는 react-router-dom은 페이지를 이동시킬 때

Route를 url에 입력된 내용과 일치하는지 위에서부터 아래로 확인하면서 내려오기 때문에

NotFound 페이지를 가장 맨 아래에 위치시킨다.

여기서 *는 '와일드카드문자'로써 '전체'를 의미

  * 404가 최상단과 최하단에 위치할 경우는?
  원래 전 문법에선 최상단 위치시 해당 주소 앞부분만 일치해도 다른 Route에 매칭되어 원하는 링크 이동이 안될수도 있었다 (때문에 exact속성도 사용)
  But, react-router v6부터 문법 바껴서 exact 옵션 삭제 되어 위 아래 위치해 있어도 기본적으로 일치할 경우에 매칭되어 이동되게 되었다. 때문에 위 아래 있어도 적용됨

 

react-router v6 부터 바뀐 문법 참고 링크

- switch -> routes 네이밍 변경
- component -> element
- exact 옵션 삭제
- useHistory 훅 변경 -> useNavigate
- 중첩 라우팅 사용 가능

<Route path='user' element={<User />} >
  <Route path='detail' element={<UserDetail />} />   //=>user/detail해당
</Route>