리액트 라우터 - 링크 대 리다이렉트 대 이력

리액트 라우터 - 링크 대 리다이렉트 대 이력

다른 쪽과 비교하여 무엇을 사용해야 할지 혼란스러운 것 같습니다.

• <Link to='/some/path'>
• <Redirect to='/some/path'/>
• history.push('/some/path')

React/Router를 사용한 지 얼마 안 됐는데, 사용 타이밍에 대해 댓글이나 답변에 따라 다른 사람이 말한 내용과 일치하지 않을 수 있습니다.그래서 나는 이것에 대해 좀 더 명확히 해야 할 것 같아요.

제가 알기로는Link이 문서에는 다음과 같은 내용이 기재되어 있습니다.

응용 프로그램에 대해 선언적이고 액세스 가능한 탐색 기능을 제공합니다.

제가 알기로는Redirect이 문서에는 다음과 같은 내용이 기재되어 있습니다.

새 위치로 이동합니다.서버측의 리다이렉트(HTTP 3xx)와 같이, 새로운 로케이션은 이력 스택내의 현재의 로케이션을 덮어씁니다.

내가 읽은 모든 게시물은 거의 모든 사람들이 사용하는 것 같아요.Redirect응용 프로그램을 탐색할 수 있지만 아무도 사용을 권장하지 않습니다.Link이 투고처럼요.

지금이다history와 같은 일을 할 수 있다Link그리고.Redirect이력 스택 트레이스가 있다는 것만 빼면요

질문 1: 언제 사용하고 싶은가?Link대Redirect, 다른 하나의 사용 사례는 무엇입니까?

질문 2: 이후history이력 스택의 추가 보너스로 사용자를 다른 위치로 라우팅할 수 있습니다.루팅할 때는 항상 이력 오브젝트만 사용해야 합니까?

질문 3: 앱 외부로 라우팅하려면 어떤 방법이 가장 좋습니까?앵커 태그, Window.location.href, 리다이렉트, 링크, 위의 어느 것도 없습니까?

먼저 이 사이트를 꼭 읽어보시기 바랍니다.
https://reacttraining.com/react-router/web/api/BrowserRouter

리액트 라우터BrowserRouter그럼 이력 스택이 유지되기 때문에 수동으로 변경할 필요가 거의 없습니다.

하지만 질문에 답하려면:
답변 1: 사용하기를 원합니다.Link또는NavLink거의 모든 사용 사례에서. Redirect는 특정 상황에서 편리합니다.예를 들어 사용자가 정의되지 않은 루트에 접속하려고 할 때 404 페이지가 렌더링되는 경우가 있습니다.그Redirect는 사용자를 404 루트에서 사용자가 선택한 새로운 루트로 리다이렉트한 후 이력 스택의 마지막 엔트리를 리다이렉트된 루트로 바꿉니다.

이는 사용자가 브라우저의 뒤로 버튼을 눌러 404 경로로 돌아갈 수 없음을 의미합니다.

Link NavLink ★★★★★★★★★★★★★★★★★」Redirect【역사 api】【역사 api】이러한 컴포넌트를 수동으로 사용하는 것이 아니라, 장래의 history api의 변경에도 안심할 수 있습니다.이러한 컴포넌트를 사용하면, 장래에 대비할 수 있습니다.

2 ★★★★ BrowserRouter기록 스택을 유지 관리합니다. 일반적으로 가능한 한 수동으로 업데이트하지 않는 것이 좋습니다.

답변 3: 외부 리액트 링크의 예를 몇 가지 나타냅니다.

<Route path='/external' component={() => window.location = 'https://external.com/path'}/>

---

<a href='https://external.com/path' target='_blank' rel='noopener noreferrer'>Regular Anchor tags work great</a>

target='_blank', ''이나 '클릭'을 .rel='noopener noreferrer'취약점을 방지하다

언급URL : https://stackoverflow.com/questions/51116747/react-router-link-vs-redirect-vs-history