해결됨: 반응 라우터 v6으로 리디렉션

React Router v6의 리디렉션과 관련된 주요 문제는 리디렉션이 발생할 때 구성 요소가 다시 렌더링되지 않는다는 것입니다. 즉, 리디렉션이 발생할 때 구성 요소와 관련된 모든 상태 또는 소품이 업데이트되지 않으며 해당 값에 대한 변경 사항이 새 페이지에 반영되지 않습니다. 또한 React Router v6는 쿼리 문자열을 지원하지 않기 때문에 URL에 전달된 쿼리 매개변수도 리디렉션 중에 손실됩니다.

import { Redirect } from "react-router-dom";

<Redirect to="/home" />

1. 이 줄은 react-router-dom 라이브러리에서 리디렉션 구성 요소를 가져옵니다.

2. 이 줄은 사용자를 "/home" 경로로 리디렉션하는 리디렉션 구성 요소를 렌더링합니다.

React Router v6에서 어떻게 리디렉션할 수 있습니까?

v6

React Router v6는 다음과 같은 새로운 구성 요소를 제공합니다. 한 페이지에서 다른 페이지로 사용자를 리디렉션하는 데 사용할 수 있습니다. 이를 사용하려면 react-router-dom 패키지에서 Redirect 구성 요소를 가져온 다음 경로 구성에서 사용하기만 하면 됩니다. 사용자가 'from' prop에 지정된 경로를 방문하면 'to' prop에 지정된 경로로 리디렉션됩니다. 예를 들어:

import { Redirect } from 'react-router-dom';
} />

로그인 후 반응 라우터 v6에서 어떻게 리디렉션합니까?

성공적인 로그인 후 리디렉션은 웹 애플리케이션의 일반적인 기능입니다. React Router v6에서는 다음을 사용할 수 있습니다. 성공적인 로그인 후 사용자를 리디렉션하는 구성 요소.

이렇게 하려면 사용자가 로그인했는지 확인한 다음 그에 따라 리디렉션하는 경로를 만들어야 합니다. 예를 들어:

{
if (isLoggedIn) {
return ;
} 다른 {
return ;
}
}} />

이 예에서는 사용자가 로그인했는지 확인한 다음 LoginPage 구성 요소를 렌더링하거나 /dashboard로 리디렉션합니다. 다음과 같이 리디렉션 구성 요소에 소품을 전달할 수도 있습니다. 이를 통해 사용자가 리디렉션되기 전에 어디에 있었는지 추적할 수 있습니다.

반응에서 자동으로 리디렉션하는 방법

React Router는 특정 조건이 충족되면 사용자를 자동으로 리디렉션하는 데 사용할 수 있는 Redirect 구성 요소를 제공합니다. 이를 사용하려면 리디렉션하려는 경로를 소품으로 전달해야 합니다. 필요한 경우 상태 및/또는 쿼리 매개변수와 함께 개체를 전달할 수도 있습니다.

자동으로 리디렉션하려면 Route 구성 요소 내에서 구성 요소를 사용하고 리디렉션이 발생해야 하는 경우에 대한 조건을 설정해야 합니다. 예를 들어 사용자가 링크를 클릭한 후 응용 프로그램 홈 페이지에서 로그인 페이지로 리디렉션하려는 경우 다음과 같이 할 수 있습니다.

{로그인되었나요? : }

이 예에서는 리디렉션을 수행해야 하는 경우에 대한 조건으로 isLoggedIn 부울 변수(다른 곳에서 설정해야 함)를 사용하고 있습니다. 이것이 사실이라면 우리는 홈 구성 요소를 렌더링합니다. 그렇지 않으면 리디렉션을 수행합니다.

5초 반응 후 리디렉션하는 방법

React Router에서 5초 후에 리디렉션하려면 setTimeout() 함수를 사용하여 원하는 경로를 인수로 사용하여 history.push() 메서드를 호출할 수 있습니다.

예:
"react-router-dom"에서 가져오기 { useHistory };
const 히스토리 = useHistory();
setTimeout(() => {
History.push(“/redirectedPage”);
}, 5000);