[Node.js] React Router란? / 사용법 ( version 5 )

라우터의 왕 

 

React Router란?

React에서 Router 기능을 편리하게 사용할 수 있게 해주는 Node.js 패키지

 

Router란?

URI와 화면을 연결해주는 기능을 하는 프로그램

 

다시, React Router란?

React에서 각각의 URI에 따라, 다른 화면을 보여주도록 연결해주는 것

 

React Router 설치하기

npm i react-router-dom

 

* 본 게시글은 react-router-dom 버전 5를 다루고 있습니다. 버전 6은 아래의 게시글을 확인해주세요.

[Node.js] React Router / 버전 6 사용법

 

React Router 사용하기 (Hash Router)

// hash router :

// HashRouter 불러와서 Router로 이름 붙이기
import {HashRouter as Router, Route} from "react-router-dom"

function App() {
  return (
    <div className="App">
      <Router>
      	<!-- "/" uri로 접속하면 "Default"을 보여줌 -->
        <Route path="/">
          <h1>Default</h1>
        </Route>
        
      	<!-- "/home" uri로 접속하면 "Home"을 보여줌 -->
        <Route path="/home">
          <h1>Home</h1>
        </Route>
        
        <!-- "/detail" uri로 접속하면 "Detail"을 보여줌 -->
        <Route path="/detail">
          <h1>Detail</h1>
        </Route>
      </Router>
    </div>
  );
}

export default App;

 

해시라우터 사용결과

 

/#/

 

 

 

/#/home

 

 

 

/#/detail

 

 

 

한번에 하나의 화면만 보여주기

// hash router :

// Switch 불러오기
import {HashRouter as Router, Route, Switch} from "react-router-dom"

function App() {
  return (
    <div className="App">
      <Router>
        <!-- Switch 사용하기 -->
        <Switch>
          <Route path="/">
            <h1>Default</h1>
          </Route>
          <Route path="/home">
            <h1>Home</h1>
          </Route>
          <Route path="/detail">
            <h1>Detail</h1>
          </Route>
        </Switch>
        
      </Router>
    </div>
  );
}

export default App;

 

 

 

 

 

 

 

다른 화면들도 보이게 하기

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <!-- exact 옵션사용해, "/"와 정확히 일치하는 것만 보여줌 -->
          <Route path="/" exact>
            <h1>Default</h1>
          </Route>
          <Route path="/home">
            <h1>Home</h1>
          </Route>
          <Route path="/detail">
            <h1>Detail</h1>
          </Route>
        </Switch>
        
      </Router>
    </div>
  );
}

 

 

 

 

 

React Router 사용하기 (Browser Router)

// browser router : 

// BrowserRouter를 불러와서 Router로 사용하기
import {BrowserRouter as Router, Route, Switch} from "react-router-dom"

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact>
            <h1>Default</h1>
          </Route>
          <Route path="/home">
            <h1>Home</h1>
          </Route>
          <Route path="/detail">
            <h1>Detail</h1>
          </Route>
        </Switch>
        
      </Router>
    </div>
  );
}

export default App;

 

브라우저 라우터 사용결과

 

 

Redirect 로, 이상한 주소입력하면 홈화면으로 되돌아가게 하기

import {BrowserRouter as Router, Route, Switch, Redirect} from "react-router-dom"
import Home from "./screens/Home";
import Login from "./screens/Login";

function App() {
  const isLoggedIn = false;
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact>
            {isLoggedIn ? <Home/> : <Login/>}
          </Route>
          <!-- 위의 경로(라우트)를 다 검사한 후에, 아무것도 일치하지 않을 경우, -->
          <Route>
            <!-- Redirect로 "/" 경로 보여주기 -->
            <Redirect to="/"/>
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

 

Link란?

기존의 웹페이지 처럼, 새로운 페이지로 이동하는 것이 아니라,

하나의 페이지에서, 새로운 페이지를 렌더링할 수 있게해주는 기능

( react-router-dom이 적용된 a태그 생성 )

 

---

라우팅 팁

로그인 여부에 따라,  라우트 접근 여부를 결정하는 것이 좋다.

ex) 로그인 안되어있을 경우에만, 회원가입 라우트 접근하게 하기

 

link에  path를 관리하는 파일 (routes.js)를 만들어서,

프로젝트 내부에서 링크 연결을 더 정확하게 만들 수 있다.