React Router(v4)

www.youtube.com/watch?v=o6j8zi5mFIg

 

라우터: url 주소나 특정 상태에 따라서 뷰를 나누기 위해 사용된다.

리액트 라우터는 하나의 라이브러리, 유일한 대안은 아니지만 거의 공식이라고 할 정도로 많이 사용되고 있다.

 

준비물

yarn, 에디터(vscode)

 

yarn 설치

brew install yarn

 

create-react-app(global) 설치

yarn global add create-react-app

 

작업할 디렉토리로 이동 후에 

create-react-app '프로젝트이름'
cd '프로젝트이름'
yarn start

 

서버가 열린 것을 확인 후에, 에디터(vscode)를 사용하여 방금 만든 디렉토리를 연다.

 

App.js 기존에 있던 코드를 삭제하고 rsc

import React from 'react';

const App = () => {
  return (
    <div>
      App
    </div>
  );
};

export default App;

저장하고 기존 프로젝트가 수정됐는지 확인 후에, 서버를 끈다.

 

react-router-dom 설치

yarn add react-router-dom

 

필요한 리액트 라우터 파일들을 불러옴

// App.js에 추가

import { BrowserRouter as Router, Route } from 'react-router-dom';

 

Home.js(메인)

// routes라는 폴더를 만들고
// Home.js 컴포넌트를 만든다

// Home.js

import React from "react";

const Home = () => {
  return <div>Home</div>;
};

export default Home;

컴포넌트 추가(App.js)

// App.js

// 홈 컴포넌트 불러옴
import Home from "./routes/Home";

// path: 특정 위치에 도달하면 지정한 컴포넌트를 보여준다.
const App = () => {
  return (
    <Router>
      <div>
        <Route path="/" component={Home} />
      </div>
    </Router>
  );
};

 

About.js(소개)

// routes
// About.js

import React from "react";

const About = () => {
  return <div>소개</div>;
};

export default About;

컴포넌트 추가(App.js)

// App.js

import About from "./routes/About";


// exact를 추가하지 않으면 about 페이지 들어갔을 때 Home도 같이 나옴("/"가 중복돼서)
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />

 

Header.js(각 라우트로 이동하게 만들어 준다)

// components라는 폴더 추가
// Header.js

// css 추가
import "./Header.css";

// 링크 추가
import { Link } from "react-router-dom";


// 링크: 어떤 주소로 이동시킬건지 설정
const Header = () => {
  return (
    <div className="header">
      <Link to="/" className="item">홈</Link>
      <Link to="/about" className="item">소개</Link>
    </div>
  );
};

Header.css

.header {
  background: #5c7cfa;
  display: table;
  table-layout: fixed;
  width: 100%;
}

.item {
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: table-cell;
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
}

.item:hover {
  background: #748ffc;
}

.item:active {
  background: white;
  color: #5c7cfa;
}

App.js

// App.js

import About from "./components/Header";

// Header 추가
<div>
        <Header />
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
</div>

 

URL 파라미터("/about/:username")

App.js

// App.js
// :을 넣고 파라미터 이름을 넣음

<Route path="/about/:username" component={About} />

About.js

// About.js
// match 사용(클래스 컴포넌트였다면 this.props.match)
// parms 접근하여 username을 불러온다

const About = ({ match }) => {
  return <div>{match.params.username}의 소개</div>;
};

Header.js

// Header.js

      <Link to="/about/beginner" className="item">소개</Link>

 

라우트 안에 또 다른 라우트 만들기

Posts.js

// routes
// Posts.js

import React from "react";

const Post = () => {
  return <div></div>;
};

export default Post;

App.js

// App.js


// 추가
import Posts from "./routes/Posts";

<Route path="/posts" component={Posts} />

Header.js

// 추가
<Link to="/posts" className="item">포스트</Link>

Posts 안에 또 다른 라우트 추가

// Posts.js
// 추가
import { Route, Link } from "react-router-dom";

// 새로운 컴포넌트 하나 추가
const Post = ({ match }) => {
  return <h2>{match.params.title}</h2>;
};

// Posts 추가
<div>
   <h1>포스트</h1>
   <Link to="/posts/react">React</Link>
   <Link to="/posts/redux">Redux</Link>
   <Route path="/posts/:title" component={Post} />
</div>

 

Nav Link 컴포넌트

홈에 들어가면 어떤 스타일을 주고, 소개에 들어가면 다른 스타일, 포스트에 들어가면 다른 스타일을 주는 것 

Header.css

// Header.css
// 수정, 추가(.item.active)
.item:active, .item.active {
  background: white;
  color: #5c7cfa;
}

Header.js

// Header.js

// Link를 NavLink로 다 바꿔줌
import { NavLink } from "react-router-dom";

// activeClassName 추가(링크가 클릭된 상태면 특정 클래스를 적용하라는 의미)
const Header = () => {
  return (
    <div className="header">
      <NavLink exact to="/" className="item" activeClassName="active">
        홈
      </NavLink>
      <NavLink to="/about/beginner" className="item" activeClassName="active">
        소개
      </NavLink>
      <NavLink to="/posts" className="item" activeClassName="active">
        포스트
      </NavLink>
    </div>
  );
};

 

리디렉팅

예를 들어 로그인해야만 보여줘야 하는 페이지가 있고, 만약 로그인이 안된 상태라면 다른 페이지(로그인 페이지)로 리디렉트 하게 만든다.

Login.js

// routes
// Login.js

import React from "react";

const Login = () => {
  return <div>로그인</div>;
};

export default Login;

MyPage.js

// routes
// Mypage.js

import React from "react";

const MyPage = () => {
  return <div>마이페이지</div>;
};

export default MyPage;

App.js

// App.js

// 추가
import Posts from "./routes/Login";
import Posts from "./routes/MyPage";

        <Route path="/login" component={Login} />
        <Route path="/mypage" component={MyPage} />

Header.js

// Header.js

// 추가
      <NavLink to="/mypage" className="item" activeClassName="active">
        마이페이지
      </NavLink>
      <NavLink to="/login" className="item" activeClassName="active">
        로그인
      </NavLink>

구현(가짜로)

MyPage.js

리디렉트 컴포넌트 사용

// MyPage.js

// 추가
import { Redirect } from "react-router-dom";

const logged = false;


// 만약 logged가 안돼있다면 리디렉트(로그인 페이지로 돌아가)
    <div>
      {
      !logged && <Redirect to="/login" />
      }
      마이페이지
    </div>

=> 마이페이지로 들어가면 로그인 페이지가 나옴

 

 

특정 메소드에서 직접 리디렉트하는 방법

홈 컴포넌트가 받는 props

history라는 props를 사용하여 브라우저 히스토리 함수들을 사용할 수 있다(ex: push, go, goback..)

Push 사용하여 임의로 리디렉트

Home.js

// Home.js

// histroy props 사용
// 버튼(포스트 페이지)을 클릭하면 posts 페이지로 이동
const Home = ({ history }) => {
  return (
  <div>
    Home
    <button onClick={()=>{history.push('/posts')}}>포스트 페이지</button>
    </div>
  )
};

 

쿼리 파라미터 처리

Search.js

// routes
// Search.js

import React from "react";

const Search = () => {
  return <div>검색</div>;
};

export default Search;

App.js

// App.js

// 추가
import Search from "./routes/Search";

<Route path="/search" component={Search} />

Header.js

// Header.js

// 추가
<NavLink to="/search" className="item" activeClassName="active">검색</NavLink>

 

쿼리 파라미터를 처리하려면 Search 컴포넌트에서 props 중에서 location을 사용

// Search.js

const Search = ({ location }) => {

search?keyword=테스트 / props 확인

Search.js

// Search.js

const Search = ({ location }) => {
  return <div>{new URLSearchParams(location.search).get("keyword")} 검색</div>;
};

 

Not Found Page(404)

NotFound.js

// routes
// NotFound.js

import React from "react";

const NotFound = () => {
  return <div>404 error: page not found</div>;
};

export default NotFound;

App.js

Switch 필요(route를 switch로 감싸주면 됨)

// App.js

// 추가
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about/:username" component={About} />
  <Route path="/posts" component={Posts} />
  <Route path="/login" component={Login} />
  <Route path="/mypage" component={MyPage} />
  <Route component={NotFound} />
</Switch>