React Nwetter - router.js

구벨로퍼·2020년 10월 29일
0

import React from "react";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import Auth from "../routes/Auth";
import Home from "../routes/Home";
import Navigation from "./Navigation";
import Profile from "../routes/Profile";

const AppRouter = ({ isLoggedIn, userObj }) => {

return (

<Router>
  {isLoggedIn && <Navigation />}
  <Switch>
    {isLoggedIn ? (
      <>
        <Route exact path="/">
          <Home userObj={userObj} />
        </Route>
        <Route exact path="/Profile">
          <Profile />
        </Route>
      </>
    ) : (
      <Route exact path="/">
        <Auth />
      </Route>
    )}
  </Switch>
</Router>

);
};

export default AppRouter;
스위치문으로 로그인 상태를 확인하여 true 일때 Home.js / false 일때 Auth.js
로그인 화면에서는 Navigation컴포넌트를 가져와 메뉴구성
{userObj} = app -> Router.js -> Home.js로 넘겨줌.

React hook 을 이용하여 상태관리를 해주고, Router를 이용하여 컴포넌트를 받아왔다.
Home ->

profile
FrontEnd Developer

0개의 댓글