[ReactJS] 라우터 환경설정 _트위터 클론코딩

src폴더 내부에 components 폴더와 routes 폴더를 만든다.

 

components/Router.js

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

const AppRouter = () => {
	// 로그인 상태관리
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    return(
        <Router>
            <Switch>
            // 로그인 된 상태일 경우
            { isLoggedIn ? 
            //  home 을 보여주고,
            <>
            <Route>
                <Home />
            </Route>
            </>
            // 로그인 상태가 아닌 경우, 로그인 화면을 보여준다.
            : <Route> <Auth /> </Route>
        }
            </Switch>
        </Router>
    )
}

export default AppRouter;

 

components/App.js

import AppRouter from "./Router";

function App() {
  return (
    <div>
      <AppRouter></AppRouter>
    </div>
  );
}

export default App;

 

그리고 테스트 용으로 routes 폴더에 각 화면을 출력할 페이지를 만든다.

 

routes/Auth.js

import React from "react";

const Auth = () => <span>Auth</span>

export default Auth;

 

routes/Profile.js

import React from "react";

export default () => <span>Edit Profile</span>

 

routes/EditProfile.js

import React from "react";

 const Home = () => <span>Home</span>

 export default Home;

 

routes/Home.js

import React from "react";

export default () => <span>Profile</span>