React Router v6에서 리디렉션과 관련된 주요 문제는 리디렉션 구문이 이전 버전에서 크게 변경되었다는 것입니다. v6에서는 리디렉션 구성 요소 대신 사용해야 합니다.
In React Router v6, you can use the <Redirect> component to redirect from one page to another.
Example:
import { Redirect } from 'react-router-dom';
<Route exact path="/old-path">
<Redirect to="/new-path" />
</Route>
1. 'react-router-dom'에서 { Redirect } 가져오기;
– 이 줄은 react-router-dom 라이브러리에서 리디렉션 구성 요소를 가져옵니다.
2.
– 이 줄은 "/old-path"의 정확한 경로를 사용하여 Route 구성 요소를 만듭니다.
3.
– 이 줄은 리디렉션 구성 요소를 사용하여 "/old-path"에서 "/new-path"로 리디렉션합니다.
React Router v6에서 어떻게 리디렉션할 수 있습니까?
v6
React Router v6는 한 페이지에서 다른 페이지로 사용자를 리디렉션하는 데 사용할 수 있는 리디렉션 구성 요소를 제공합니다. 리디렉션 구성 요소를 사용하려면 react-router-dom 패키지에서 가져와야 합니다. Redirect 컴포넌트는 from과 to라는 두 개의 props를 취합니다. "from" prop은 현재 페이지의 경로이고 "to" prop은 사용자를 리디렉션하려는 페이지의 경로입니다. 예를 들어 사용자를 /homepage에서 /about으로 리디렉션하려는 경우 코드는 다음과 같습니다.
import { Redirect } from 'react-router-dom';
반응 라우터는 무엇입니까?
React Router는 개발자가 탐색 및 동적 상태 기반 라우팅을 사용하여 단일 페이지 애플리케이션을 만들 수 있도록 하는 React용 라우팅 라이브러리입니다. UI를 URL과 동기화하여 사용자가 URL을 더 쉽게 공유하고 북마크할 수 있도록 도와줍니다. React Router는 지연 로딩, 경로 보호 및 위치 전환 처리와 같은 강력한 기능도 제공합니다.
반응하는 라우터 유형
React Router는 개발자가 탐색 및 URL 라우팅을 사용하여 단일 페이지 애플리케이션을 만들 수 있는 React용 라우팅 라이브러리입니다. BrowserRouter, HashRouter 및 MemoryRouter의 세 가지 유형의 라우터를 제공합니다.
BrowserRouter: 이 라우터는 HTML5 기록 API를 사용하여 UI와 URL을 동기화합니다. 애플리케이션에서 실제 URL을 사용하려는 경우에 사용됩니다.
HashRouter: 이 라우터는 URL의 해시 부분(즉, #)을 사용하여 UI와 URL의 동기화를 유지합니다. 실제 URL을 사용하고 싶지 않거나 HTML5 히스토리 API를 지원하지 않는 구형 브라우저와의 호환성이 필요할 때 사용합니다.
MemoryRouter: 이 라우터는 메모리의 위치 기록을 유지하고 브라우저의 주소 표시줄과 상호 작용하거나 실제 URL을 생성하지 않습니다. 테스트 목적이나 실제 URL을 사용하는 것이 바람직하지 않은 환경(예: 서버 측 렌더링)에 유용합니다.
