리액트) 리액트 라우터 v7 설치하고 초기 세팅해보기,

좋아요! 리액트 라우터를 설치하려면 아래 단계를 따라 진행하시면 됩니다:

1. React Router 설치

터미널에서 다음 명령어를 실행하세요:

bash

npm install react-router

이 명령어는 최신 버전의 React Router(v7)를 설치합니다.

2. BrowserRouter 설정

React 애플리케이션의 최상위 컴포넌트를 BrowserRouter로 감싸야 합니다. 예를 들어:

jsx

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

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

3. 라우트 정의

App 컴포넌트에서 라우트를 정의합니다:

jsx

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

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

function Home() {
  return <h1>홈 페이지</h1>;
}

function About() {
  return <h1>소개 페이지</h1>;
}

export default App;

4. 개발 서버 실행

설치와 설정이 완료되었으면, 개발 서버를 실행하세요:

bash

npm start

이제 브라우저에서 애플리케이션을 열어 라우팅이 잘 작동하는지 확인하시면 됩니다. 추가로 궁금한 점이 있거나 문제가 발생하면 알려주세요! 😊