React - Routing 실습

1. index.html

import React from "react";
import ReactDOM from "react-dom";
import Router from "./Router";

ReactDOM.render(
  <Router />,

  document.getElementById("root")
);

2.Router.js

import React from "react";
import { Routes, Route, BrowserRouter } from "react-router-dom";

import Login from "./pages/Login/Login";
import Main from "./pages/Main/Main";

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />		//시작페이지를 Login.js로 함
        <Route path="/Main" element={<Main />} />	//시작페이지에서 /Main을 추가하면 Main.js를 염.
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

3. Login.js

import "./Login.css";
import "../../style/common.css";
import React from "react";
import { useNavigate } from "react-router-dom";
import { Link } from "react-router-dom";

const Login = () => {
  const navigate = useNavigate();

  const goToMain = () => {
    navigate("/Main");		//함수가 동작하면 Main.js를 실행 시킴.
  };
  return (
    <div id="mainbox">
      <div id="logo">westagram</div>
      <div id="loginbox">
        <div id="inputbox">
          <input
            id="loginid"
            type="text"
            placeholder="전화번호, 사용자 이름 또는 이메일"
          />
          <input id="loginpw" type="password" placeholder="비밀번호" />
        </div>
        <div id="loginBtn">
          <a className="mainlink">
            <button className="nonwork" onClick={goToMain}>		//button을 클릭하면 위의 {goToMain} 함수를 실행 시킴
              로그인
            </button>
          </a>
        </div>
      </div>
      <div id="information">
        <a href="">
          <Link to="/Main">비밀번호를 잊으셨나요?</Link>	//해당 태크를 클릭하면 Main.js로 넘어감.
        </a>
      </div>
    </div>
  );
};

export default Login;