React 라우터 v6 기능을 사용하여 조건부로 특정 경로에 구성 요소를 렌더링하는 방법을 살펴보겠습니다.

article에서 내 최신hubpages을 확인하세요!

전제 조건

다음 npm 명령을 사용하여 React Router V6를 설치합니다.npm install react-router-dom@6
다음으로 react router dom에서 다음 구성 요소를 가져옵니다.

import {
  BrowserRouter as Router,
  Route,
  Routes,
  Navigate,
} from "react-router-dom";

루트 크레스팅

먼저 페이지의 모든 콘텐츠를 . 다음으로 구성 요소 내부에 개별 경로를 만듭니다.

return (
    <Router>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route exact path="start" element={<Start />} />
      </Routes>
    </Router>
)

각 경로에 대해 경로 및 요소 소품이 있으며 주소 표시줄의 경로와 렌더링할 구성 요소를 각각 알려줍니다. 정확한 소품은 *location.pathname *이 정확한 위치 경로와 일치하도록 합니다.

조건부 라우팅

예를 들어 사용자가 로그인한 경우와 같이 상태가 true인 경우에만 구성 요소를 렌더링하고 싶다고 가정해 보겠습니다. 다음과 같이 할 수 있습니다.

<Route
  exact
  path="start"
  element={
    loggedIn ? (
      <Start />
    ) : (
      <Navigate replace to={"/"} />
    )
  }
/>

기본적으로 여기서는 loggingIn 상태가 참인지 확인합니다. 그렇다면 시작 구성 요소를 반환하지만 거짓이면 Navigate 요소를 사용하여 사용자를 홈페이지로 리디렉션합니다.

replace prop은 단순히 현재 위치를 추가하는 대신 주어진 경로로 대체합니다.


읽어 주셔서 감사합니다!