[react]페이지 간 연결

1. react-router-dom 설치

브라우저의 주소(URL)에 따라 보여주는 컴포넌트를 다르게 해주는 게 react-router-dom

ex) /login이면 LoginPage

npm install react-router-dom

 

2. App.jsx에 라우터 세팅

// src/App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import LoginPage from './pages/LoginPage';
import CaseListPage from './pages/CaseListPage';
import CaseDetailPage from './pages/CaseDetailPage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route path="/cases" element={<CaseListPage />} />
        <Route path="/cases/:id" element={<CaseDetailPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

import { BrowserRouter, Routes, Route } from 'react-router-dom';

BrowserRouter: 브라우저의 주소창을 감시하면서, 주소가 바뀔 때마다 자동으로 필요한 컴포넌트를 렌더링

Routes: 보여줄 화면 묶어놓음

Route: 하나의 URL 경로 + 거기에 연결할 컴포넌트를 지정

ex)  /login 주소에 오면 <LoginPage /> 컴포넌트를 화면에 띄워줘!

<Route path="/login" element={<LoginPage />} />

앞선 전체 코드에서

import LoginPage from './pages/LoginPage';

를 함으로써 app.jsx에서 <LoginPage /> 사용 가능

LoginPage.jsx 모습

function LoginPage() {
    return (
      <div>
        <h1>Login Page입니다.</h1>
      </div>
    );
  }
  export default LoginPage;

====

이제 웹주소 입력후 페이지 이동가능