React - JS로 라우팅 이동하기

• Router의 Props history 객체 사용
  • go, push, replace 등등..

// App.js
function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/" exact component={Home} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

// Login.jsx
import LoginButton from '../components/LoginButton';

export default function Login(props) {
  return (
    <div>
      <h2>Login 페이지 입니다.</h2>
      <LoginButton {...props} />
    </div>
  );
}

// LoginButton.jsx
export default function LoginButton(props) {
  const login = () => {
    setTimeout(() => {
      // 페이지 이동
      props.history.push('/');
    }, 1000);
  };

  return <button onClick={login}>로그인하기</button>;
}

---

• 하지만, 위와 같은 방법은 지양하고 있음
• 컴포넌트가 복잡해지는 경우 props를 계속 넘겨주어야 함
• 해결방법
  1. React 고차 컴포넌트 사용(HOC, Higher Order Component)
     • React Router의 withRouter 사용
       
       
  2. React Hook

// Login.jsx
// props 전달 제거
import LoginButton from '../components/LoginButton';

export default function Login() {
  return (
    <div>
      <h2>Login 페이지 입니다.</h2>
      <LoginButton />
    </div>
  );
}

// LoginButton.jsx
// withRouter 사용
import { withRouter } from 'react-router-dom';

export default withRouter(function LoginButton(props) {
  const login = () => {
    setTimeout(() => {
      // 페이지 이동
      props.history.push('/');
    }, 1000);
  };

  return <button onClick={login}>로그인하기</button>;
});