React)App 라우팅

import './App.css';  // 스타일 시트 임포트
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';  // React Router의 필요한 컴포넌트 임포트
import LoginForm from './login/LoginForm';  // 로그인 폼 컴포넌트 임포트

function App() {
  return (
    <Router>
      <Routes> 
        <Route path='/' element={<LoginForm />} /> {/* Switch 대신 element 속성 사용 */}
      </Routes>
    </Router>
  );
}

export default App;

1. react-router-dom 설치하기

npm install react-router-dom

2. React Router 관련 컴포넌트

• import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
• BrowserRouter
• React Router의 주요 라우터
• HTML5의 history API를 사용하여 브라우저의 URL을 관리
• Route
• URL 경로와 컴포넌트를 연결
• 특정 경로에 접근했을 때 어떤 컴포넌트를 렌더링할지 정의
• Routes
• 여러 개의 Route를 포함
• 현재 URL 경로에 맞는 Route를 찾아 해당 컴포넌트를 렌더링
 

3. 라우팅 설정

• <Router>  </Router>
• Router 컴포넌트는 애플리케이션의 라우팅 컨텍스트를 제공
• 이 내부에서 정의된 모든 라우트는 URL 변경에 따라 동적으로 렌더링

• <Routes>
• 내부에는 여러 개의 Route를 포함할 수 있음
• 현재 경로에 따라 올바른 컴포넌트를 렌더링

• <Route path='/' element={<LoginForm />} />
• path='/': 기본 경로인 페이지에 접근할 때
• element={<LoginForm />}: 해당 경로에 접근하면 LoginForm 컴포넌트를 렌더링
• element 속성을 사용하여 컴포넌트를 렌더링하는 방식