[React] react-router-dom 시작하기 (feat. material-dashboard)

현재 CRA를 이용하여 프로젝트를 생성하였다.

간편한 디자인 적용을 위해 material-UI에서 제공해주고 있는 무료 템플릿을 가져다 썻다.

필요없는 소스파일을 없애기 위해 내가 만든 프로젝트에 material 템플릿을 차차 적용시켜보려고 한다.

 

SPA(Single Page Application)을 개발할 때 가장 먼저 겪는 어려움은 웹페이지 라우팅이 아닌가 싶다.

역시나 첫번째 난관이 react-router 컴포넌트에서 발생했는데..

찾아보니 NavLink 컴포넌트가 정상 작동을 하지 않았다. 그 과정에서 작성하게된 글이다.

React Router란?

주소에 따라 다른 뷰를 보여주는 것을 라우팅이라고 한다.

이 때 SPA 특성상 페이지를 새로고침하지 않으면서 화면을 전환해주어야 한다. 

라우팅은 react 자체에 내장되어 있지 않기 때문에 이를 구성하기 위해 react-router를 사용하기로 했다.

여러 화면으로 구성된 웹 어플리케이션을 만든다면 필수 라이브러리이다.

 

https://reactrouter.com/web/guides/quick-start

React Router: Declarative Routing for React

사이트를 들어가면 react-router가 종류가 있는것을 볼 수 있다. 세가지 패키지는 각각 용도가 다르다.

내가 사용할 것은 웹이므로 react-router-dom을 사용한다.

 

- react-router : 웹&앱

- react-router-dom : 웹

- react-router-native : 앱

 

npm install react-router-dom

---

material-dashborad 소스를 보면 index.js 초기 설정이 아래와 같이 되어있다.

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";

// core components
import Admin from "layouts/Admin.js";
import RTL from "layouts/RTL.js";

import "assets/css/material-dashboard-react.css?v=1.9.0";

const hist = createBrowserHistory();

ReactDOM.render(
  <Router history={hist}>
    <Switch>
      <Route path="/admin" component={Admin} />
      <Route path="/rtl" component={RTL} />
      <Redirect from="/" to="/admin/dashboard" />
    </Switch>
  </Router>,
  document.getElementById("root")
);

 

• Router - <Route>와 <Redirect> 컴포넌트가 함께 유기적으로 동작하도록 묶어주는데 사용. 공통 상위 컴포넌트로 가지고 있어야한다.
• Route - 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트를 렌더링한다.
• Switch - 자식 컴포넌트 Route또는 Redirect중 매치되는 첫 번째 요소를 렌더링한다. Switch를 사용하면 하나의 매칭 요소만 렌더링한다는 점을 보장해준다. 사용하지 않을 경우 매칭되는 모두를 렌더링한다.

---

위 처럼 그대로 복붙을 해보니 메뉴를 클릭할 때마다 빈 화면이 표출됬다.

NavLink 컴포넌트에 지정된 URL 페이지를 못 찾는 것 같았다.

 

공홈에서 <Router> 컴포넌트는 저수준 공통 인터페이스로 일반적으로 앱은 상위수준 라우터중 하나를 사용한다고 되어있다. 종류로는 <BrowserRouter>, <HashRouter> 등등이 있다.

 

그래서 다른 예제들을 보니 BrowserRouter의 별칭을 Router로 사용하고 있었고.. 나 또한 소스를 아래와 같이 수정하여

문제를 해결햇다.

import React from 'react';
import ReactDOM from 'react-dom';
import { createBrowserHistory } from "history";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";

// core components
import Admin from "layouts/Admin.js";

import "assets/css/material-dashboard-react.css?v=1.9.0";

// const hist = createBrowserHistory();

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route path="/admin" component={Admin} />
      <Redirect from="/" to="/admin/dashboard" />
    </Switch>
  </BrowserRouter>,
  document.getElementById('root')
);

 

• BrowserRouter - history API를 사용해 URL과 UI를 동기화하는 라우터

<Router> 에서 <BrowserRouter>로 변경하니 history를 넘겨줄 필요도 없어졌고 NavLink가 정상작동하기 시작했다.