Devcamp_LoginPage2

SSUN·2022년 9월 19일
0

devcamp

목록 보기
7/9

로그인 페이지에서 로그인 버튼 클릭 시 main 페이지로 넘어가도록 설정을 해야한다.
이 과정에서 어려움을 겪은 것 같다. 기존에는 이런 식으로 하면 간단하게 끝났는데 react에서는 react-router-dom을 사용해야 하는데 그 부분이 어려웠던 것 같다.

Main.tsx

  • 우선은 Main.tsx 파일을 수정해주었다.
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import LoginPage from "./LoginPage";
import "../css/main.css";
import MainPage from "./MainPage";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LoginPage />} />
        <Route path="MainPage" element={<MainPage />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

npm install react-router-dom을 한 뒤 작업을 해주었다.

  • react-router-dom의 경우 <BrowserRouter> 태그로 컴포넌트들을 감싸주어야 한다.
  • <Routes> 안에 <Route>를 넣어준다.
    • <Routes> 컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다.
    • <Route>는 path속성에 경로, element속성에는 컴포넌트를 넣어 준다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 * 을 사용한다.

      이 부분까지는 문제가 없었다.

LoginPage.tsx

<div id="loginBtnDiv">
  <Link to="/MainPage">
    <Button id="loginBtn" variant="primary" type="submit">
      <p id="loginBtnText">로그인</p>
    </Button>
  </Link>
</div>
  • <Link> 컴포넌트 사용하기
    • 웹 페이지에서는 a태그를 사용하지만 a 태그는 클릭 시 페이지를 새로 불러오기 때문에 <Link> 를 사용한다.
    • 문법 : <Link to="경로">링크명</Link>
    • import { Link } from 'react-router-dom';

vscode에서 Link를 인식하지 못하는 문제가 발생하였다. import 에서는 Link가 인식 된 것으로 뜨는데 <Link to="">는 인식을 못하는 문제였다. 아무리 구글링을 해봐도 이와 관련된 문제를 찾을 수 없었다. 버전 문제인가 싶기도 한데.. 정말 아예 이유를 모르는 채로 밤새 고민하다 결국 해결을 못했다. 그런데 나중에 다시 켜서 Link를 쓰니 또 작동이 된다... 도저히 뭐가 문제인지 모르겠다.. 된거는 다행인데 이 문제가 무엇인지 알아야 다음에 이런 일이 있을 때 고칠텐데 결국 이유는 알아내지 못했다. 무슨 문제인지 아는 분이 계시다면 알려주시면 감사하겠습니다..!!

profile
부딪히며 성장하는 예비개발자

0개의 댓글