[react] 버튼 하나에 두 가지 경로 넣기 react-router-dom/useState

//앱 미리보기 ⬆️
//리액트 프로젝트 'creat-react-app: 새 프로젝트 준비'에서 이어집니다.
//react-router-dom 업데이트 이후 수정(2021.12.26)

여러 사이트의 로그인/회원가입 페이지를 보다가 왓쳐의 라우터가 깔끔해 보였기에 구현해보록 하겠습니다.
이 글에선 useState를 이용하여 하나의 버튼으로 로그인페이지와 회원가입페이지를 번갈아 보여줍니다.

react-router-dom 설치

cd client
npm i react-router-dom

디렉토리, 파일 생성

src/routes 디렉토리 생성
src/routes/Home.js 생성
src/routes/Login 생성
src/routes/Register 생성
src/components 디렉토리 생성
src/components/Navbar.js 생성
src/components/Navbar.css 생성

Home.js / Login.js / Register.js

function Home() {
    return (
      <div>
        <h2>Home</h2>
      </div>
    );
  }

export default Home;

function Login() {
    return (
      <div>
        <h2>Home</h2>
      </div>
    );
  }

export default Login;

function Register() {
    return (
      <div>
        <h2>Home</h2>
      </div>
    );
  }

export default Register;

Navbar.js

import React, {useState} from 'react';
import { Link } from "react-router-dom";
import "./Navbar.css"

function Navbar() {
    const [sign, setSign] = useState(true)
    const onClick = () => {
        setSign((prev) => !prev)
    }
    return (
        <div>
            <ul className="navbar">
                <li><Link to="/">Home</Link></li>
                {sign ? (
                    <li><Link to="/sign_in"><button onClick={onClick}>로그인</button></Link></li>
                    ) : (
                    <li><Link to="/sign_up"><button onClick={onClick}>회원가입</button></Link></li>
                )}      
            </ul>
        </div>
    );
}

export default Navbar;

Navbar.css

ul {
    list-style: none;
}
a{
    text-decoration: none; 
    color: #828282;
    font-size: 20px;
}
button {
    border: 0;
    color: #828282;
    font-size: 20px;
}
.navbar{
    display: flex;
}
.navbar li{
    text-align: center;
    flex: 1;
    padding: 10px;
}

App.js

import React from "react";
import {
  BrowserRouter as Router,
  //Switch,
  Routes,
  Route
} from "react-router-dom";
import Navbar from './components/Navbar';
import Home from './routes/Home';
import Login from './routes/Login';
import Register from './routes/Register';
import "./style.css"

function App() {
  return (
    <Router>
      <div>
        <Navbar />
        //<Switch>
        <Routes>
          //<Route exact path="/" component={Home} />
          <Route exact path="/" element={Home} />
          <Route exact path="/sign_in" element={Login} />
          <Route exact path="/sign_up" element={Register} />
        //</Switch>
        </Routes>
      </div>
    </Router>
  );
}

export default App;