# Router Setup

1. react-router-dom 설치

npm install react-router-dom

2. Router.js에 Router import 하기

import { HashRouter as Router, Routes, Route } from "react-router-dom";

3. Route 설정하기

path = "경로", element = {<보여줄 요소/>}

Router.js

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

function AppRouter() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return (
    <Router>
      <Routes>
        {isLoggedIn ? (
          <>
            <Route exact path="/" element={<Home />}></Route>
          </>
        ) : (
          <Route exact path="/" element={<Auth />}></Route>
        )}
      </Routes>
    </Router>
  );
}

export default AppRouter;

폴더 구성

⭐️ 참고

Fragment < >

많은 요소들을 render 하고 싶을 때 사용함.

⚠️ Switch 사용 오류 : 'Switch' is not exported from 'react-router-dom'

Switch가 Routes로 바뀌었으므로 Routes를 사용해주면 된다.