로그인 페이지에서 로그인 버튼 클릭 시 main 페이지로 넘어가도록 설정을 해야한다.
이 과정에서 어려움을 겪은 것 같다. 기존에는 이런 식으로 하면 간단하게 끝났는데 react에서는 react-router-dom을 사용해야 하는데 그 부분이 어려웠던 것 같다.
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
을 한 뒤 작업을 해주었다.
<BrowserRouter>
태그로 컴포넌트들을 감싸주어야 한다. <Routes>
안에 <Route>
를 넣어준다.<Routes>
컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다.<Route>
는 path속성에 경로, element속성에는 컴포넌트를 넣어 준다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 * 을 사용한다.이 부분까지는 문제가 없었다.
<div id="loginBtnDiv">
<Link to="/MainPage">
<Button id="loginBtn" variant="primary" type="submit">
<p id="loginBtnText">로그인</p>
</Button>
</Link>
</div>
<Link>
컴포넌트 사용하기<Link>
를 사용한다.<Link to="경로">링크명</Link>
import { Link } from 'react-router-dom';
vscode에서 Link를 인식하지 못하는 문제가 발생하였다. import 에서는 Link가 인식 된 것으로 뜨는데
<Link to="">
는 인식을 못하는 문제였다. 아무리 구글링을 해봐도 이와 관련된 문제를 찾을 수 없었다. 버전 문제인가 싶기도 한데.. 정말 아예 이유를 모르는 채로 밤새 고민하다 결국 해결을 못했다. 그런데 나중에 다시 켜서 Link를 쓰니 또 작동이 된다... 도저히 뭐가 문제인지 모르겠다.. 된거는 다행인데 이 문제가 무엇인지 알아야 다음에 이런 일이 있을 때 고칠텐데 결국 이유는 알아내지 못했다. 무슨 문제인지 아는 분이 계시다면 알려주시면 감사하겠습니다..!!