[ReactJS] Router Setting

1. /src에 components와 routes 폴더를 생성한다

2. App.js 파일을 components 폴더에 담은 후 index.js 파일에서 App.js의 경로를 수정한다

/src/index.js

import App from './components/App';

 

3. routes 폴더에 Auth.js, Home.js, Profile.js, EditProfile 파일을 생성하고 다음과 같이 코드를 작성한다  Routes component들을 입력하고 Enter을 눌렀을 때 자동으로 import할 수 있게 한 것이다

/src/routes/Auth.js

import React from "react"

const Auth = () => <span>Auth</span>;
export default Auth;

 

4. npm i react-router-dom을 입력하여 react-router-dom을 설치한다

5. /components 에 Router.js를 생성한다

6. Router.js 에 react-router-dom을 import하고 Route를 로그인 여부에 따라 달라지게 해야 한다

우선 App.js에 AppRouter을 render하고 로그인 여부를 useState로 세팅한 후 로그인 여부를 Router에 전달하기 위해 AppRouter에 prop을 준다

App.js

import React, {useState} from "react";
import AppRouter from "./Router";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return <AppRouter isLoggedIn={isLoggedIn}/>;
}

export default App;

 

/components/Router.js

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

const AppRouter = ({isLoggedIn}) => {
    return (
        <Router>
            <Routes>
                {isLoggedIn ? 
                    (<Route path="/ReactJS-Twitter-App" element={<Home />}></Route>) :
                    (<Route path="/ReactJS-Twitter-App" element={<Auth />}></Route>)
                }
            </Routes>
        </Router>
    )
}

export default AppRouter;

 

8. 그리고 App.js에 <AppRouter />을 render한다