Prop.history.push & Higher Order Components(with Router)

어떤 페이지로 갔을때 강제로 리다이렉팅 하고 싶을때가 있다면!
props.history.push를 사용할 수 있다!

아래의 예시는 Contact.js에서 About.js로 강제 리다이렉팅하는 것!

2000 ms 지난 뒤 props.hisotry Array에 /about을 push() 해주고 이로 인해 강제로 페이지가 리다이렉팅된다.

Contact.js

import React from "react";

const Contact = (props) => {
  // this is everything!
  setTimeout(() => {
    props.history.push("/about");
  }, 2000);
  
  return (
    <div className="container">
      <h4 className="center">Contact</h4>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae velit
        maiores ratione nobis, consequuntur blanditiis sequi officia tempora
        adipisci necessitatibus modi beatae consequatur, deserunt aperiam
        dignissimos ea labore. Nemo, ducimus?
      </p>
    </div>
  );
};

export default Contact;

하지만 다음과 같은 경우에는 작동하지 않는다!
각 메뉴 보다 상위 메뉴인 Navbar.js에서는 props가 undefined로 표기 되면서 잡히지 않는다.
왜 그런걸까? 그리고 /about 으로 리다이렉팅 하려면 어떻게 해야하는걸까?

Navbar.js

import React from "react";
import { Link, NavLink } from "react-router-dom";

const Navbar = (props) => {
  //   console.log(props);
     setTimeout(() => {
       props.history.push("/about");
     }, 2000);
  
  return (
    <nav className="nav-wrapper red darken-3">
      <div className="container">
        <a className="brand-logo">Poke'Times</a>
        <ul className="right">
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <NavLink to="/about">About</NavLink>
          </li>
          <li>
            <NavLink to="/contact">Contact</NavLink>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default Navbar;

우선 다시 App.js 를 살펴보자. 우리가 리다이렉팅에 성공했던 /contact 는 <Route /> 에 종속되어있다. 우리가 history로 보내려고 했었던 props인 history는 결과적으로 react-router-dom에서 자동으로 생성되는 props다.

따라서 <Route /> 와 관계없는 <Navbar />의 경우 props.history 의 혜택을 받지 못한다.
그렇다면 어떻게 <NavBar />를 <Route />혜택을 받을 수 있도록 할 수 있을까?

App.js

import React, { Component } from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Navbar />
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

다시 Navbar.js로 돌아가보자. react-router를 강제 적용하기 위해서는 react-router-dom의 withRouter 모듈이 필요하다. import 하자!
그리고 마지막 export부분에서 withRouter()를 통해 Navbar 를 적용시켜 export시킨다!
그러면 이제는 <Navbar /> 자체에 react-router가 적용되서 /about으로 리다이렉팅 된다.

import React from "react";
import { Link, NavLink, withRouter } from "react-router-dom";

const Navbar = (props) => {
   console.log(props);
  // redirecting '/about'
   setTimeout(() => {
     props.history.push("/about");
   }, 2000);
  return (
    <nav className="nav-wrapper red darken-3">
      <div className="container">
        <a className="brand-logo">Poke'Times</a>
        <ul className="right">
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <NavLink to="/about">About</NavLink>
          </li>
          <li>
            <NavLink to="/contact">Contact</NavLink>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default withRouter(Navbar);