[ React ] Router 페이지 불러오기 / 네비게이션

Router 페이지 불러오기 / 네비게이션 기능

 

1. 구조 셋팅

1-1. 라이브러리 설치

npm install react-router-dom

• react-router-dom : web 에서 사용
• react-router-native : app 에서 사용
• react-router : web / app 에서 사용

1-2. 폴더 경로 생성

컴포넌트 역할에 맞는 폴더 생성하여 분리하여 관리
src 폴더안에 컴포넌트 경로를 생성해준다.

• components : 기능 별 컴포넌트
• routes : 라우터가 보여줄 화면 컴포넌트

 

 

2. 라이브러리 적용

2-1. BrowerRouter & HashRouter

• BrowerRouter
  • html5 history API 를 활용해서 UI를 업데이트
  • 동적인 페이지에 적합
  • 새로고침 시 경로를 찾지 못해 에러(추가 셋팅이 필요)
  • 배포가 복잡

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

• HashRouter
  • URL의 hash를 활용한 라우터
  • 주소에 # 이 붙음 EX) http://localhost:3000/#/about
  • 정적인 페이지에 적합
  • 검색 엔진으로 읽지 못함 ( # 때문에 서버가 읽지 못함 )
  • 새로고침시 에러가 없음
  • 베포가 간편

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

 

2-2. HashRouter를 사용한 페이지 불러오기

📑 App.js

import React from "react";
import "./App.css";
import { HashRouter, Route } from "react-router-dom";
import Home from "./routes/Home";
import About from "./routes/About";

function App(){
  return (
    <HashRouter>
        <Route path="/" exact={true} component={Home} />
        <Route path="/about" component={About} />
    </HashRouter>
  );
}

export default App;

이렇게 사용 시 Routes 를 사용하라는 에러가 났는데 react-router-dom의 버전 문제이다.
해결 방법으로는 두가지가 있다 .

1) 라이브러리 최신 버전에 맞는 사용 방법
Routes 로 감싸주어 사용

2) 라이브러리 이전 버전으로 변경
npm install react-router-dom@5.3.0

 

2-3. 라우터의 동작원리

• Route 에 path 속성에 포함되어있는 컴포넌트를 모두 render한다.
  ex) path='/about' 의 경우 '/' '/about' 컴포넌트 두가지를 다 찾게되어 화면에 Home과 About 컴포넌트의 내용이 모두 출력된다.
• Route태그에 exact={true} 속성
  자신의 path에 정확하게 위치해야만 자신의 컴포넌트가 render된다.

 

 

3. 네비게이션 연결

기존에 HTML에서 사용하는 a 태그는 새로 페이지가 변화 되어 불러와지기 때문에 한 페이지에서 컴포넌트를 불러오는 리엑트와 맞지 않다.
리엑트에서는 a 태그 대신 Link 태그를 사용하여 페이지 컴포넌트를 변경 할 수 있다.

<Link to="경로"> 를 사용하여 이동한다. 이때 이동하는 컴포넌트에 파라미터(Props)도 넘겨줄수 있다.
<Link to={{pathname='/movie-detail', state={title,summary,...}}}>

📑 Navigation.js

import React from "react";
import { Link } from "react-router-dom/cjs/react-router-dom.min";

const Navigation=()=>{
    return (
        <div>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
        </div>
    );
}

export default Navigation;