React PublicRoute & PrivateRoute 활용법

import React from "react";

import { HashRouter, Route, Switch, Redirect} from "react-router-dom";

 

// components

import Layout from "./RouteMenunComponents/Layout/Layout";

// pages

import Error from "../pages/error";

import LoginContainer from "../pages/login/LoginContainer";

 

const App = (props) => {

 

  // global

  const { isAuthenticated } = props

 

  return (

    <HashRouter>

      <Switch>

 

        <Route 

          exact 

          path="/" 

          render = {() => <Redirect to="/app/dashboard" />} 

        />

 

        <Route

          exact

          path="/app"

          render={() => <Redirect to="/app/dashboard" />}

        />

 

        <PrivateRoute path="/app" component={Layout} />

 

        <PublicRoute path="/login" component={LoginContainer} />

        <Route component={Error} />

      </Switch>

    </HashRouter>

  );

 

•   ========================================================================

PrivateRoute, PublicRoute는 권한을 가지고 있는 변수 값이 true false를 판별하여 그에 따른 값을 치환한다

 

  function PrivateRoute({ component, ...rest }) {

 

    return (

      <Route

        {...rest}

        

        render={props =>

          isAuthenticated ? (

            React.createElement(component, props)

          ) : (

            <Redirect

              to={{

                pathname: "/login",

                state: {

                  from: props.location,

                  explain: '로그인 인증 실패'

                },

              }}

            />

          )

        }

      />

    );

  }

 

•   ========================================================================

 

 

 function PublicRoute({ component, ...rest }) {

    return (

      <Route

        {...rest}

        render={props =>

          isAuthenticated ? (

            <Redirect

              to={{

                pathname: "/",

              }}

            />

          ) : (

            React.createElement(component, props)

          )

        }

      />

    );

  }

}

export default App;