로그인, 회원가입 컴포넌트 라우팅 설정

미리보기

 

 

react-router-dom 설치

아래의 명령어로 react-router-dom 을 설치해주면 됩니다.

npm install react-router-dom

BrowerRouter 추가

라우터를 추가할 컴포넌트에 BrowerRouter 컴포넌트로 감싸줍니다.

저는 main.jsx 파일안 App 컴포넌트를 BrowserRouter로 감싸줬습니다.

import "./index.css";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Routes, Route 컴포넌트로 경로 설정

App 컴포넌트안의 내용을 다음과 같이 바꿔줍니다.

Routes 컴포넌트 안에 Route 컴포넌트에 속성으로 path = 경로, element = 컴포넌트 형식으로 구성해 Route를 추가해줍니다.

import "./App.css";
import { Route, Routes } from "react-router-dom";
import Login from "./components/Login";
import Signup from "./components/Signup";

function App() {
  return (
    <>
      <Routes>
        <Route path="/login" element={<Login />}></Route>
        <Route path="/signup" element={<Signup />}></Route>
      </Routes>
    </>
  );
}

export default App;

결과

다음과 같은 명령어를 터미널에 실행 시켜 리액트를 실행 시켜 줍니다.

npm run dev

http://localhost:5173/login

위에 주소로 접근하게 되면 로그인 컴포넌트 화면이 나옵니다.

http://localhost:5173/signup

위에 주소로 접근하게 되면 회원가입 컴포넌트 화면이 나옵니다.