2017-09-06 5 views
0

나는 다양한 단계를 통해 사용자를 데려가는 React 앱을 가지고있다. 브라우저의 "뒤로"버튼을 사용하여 이전 단계로 돌아갈 수있는 권한을 갖고 싶습니다. 이제는 반응 라우터를 사용하여이 작업을 수행 할 생각입니다."setState"상태를 잃지 않고 반응 라우터를 사용하고 있습니까?

현재 이벤트에 반응하고 최상위 구성 요소에서 setState를 호출하고 있습니다.

내 질문 : 모든 상태가 URL에 반영되거나 로컬 저장소에 저장되어야합니까? 또는 구성 요소의 state을 유지하고 반응 라우터가 최상위 구성 요소에 props을 변경하도록 할 수 있습니까? 그렇게하면 React가 이전 구성 요소와 새 구성 요소를 식별하지 못하기 때문에 구성 요소의 state이 손실 될 수 있습니까?

/step1과 같은 간단한 URL을 갖고 싶습니다. /step2 .... 이 이 아니므로 앱에서 진행되고있는 모든 것을 반영합니다. 특히, 필자는 그러한 URL을 직접 입력 할 필요가 없거나 원하는 기능을 원합니다. 또한 개인 정보 보호에 대한 우려가 있습니다. 주 구성 요소의 임시 버전 state에서 응용 프로그램의 상태가 만족 스럽습니다. 즉, 내 응용 프로그램의 상태가 경로의 순수한 기능이 아닙니다.

주로 반응 라우터를 사용하여 뒤로 버튼을 실행 취소/마지막 단계로 이동 버튼으로 사용하고 두 번째로 다른 구성 요소로 이동합니다. 어떻게하는지 보여주는 아이디어 나 작은 발췌 문장? 아니면 반응 라우터가이 용도에 적합하지 않습니까?

+0

구성 요소를 변경 한 경우 반응 라우터의 매개 변수 인 IMHO를 사용하지 않으려면 매개 변수를 소품으로 전달해야합니다. 나는 또한 당신이 모든 애플 리케이션 상태를 부모 컴포넌트에 살도록 할 수 있고 콜백을 자식에게 전달함으로써 변경되도록 할 수 있다고 생각한다 (애플 리케이션이 넓 으면 큰 혼란을 야기 할 것이다). –

+0

체크 아웃을 원하지 않는 경우, 무언가를 다른 페이지로 전달하려는 경우 상태 대신 소품을 사용하고, 체크 아웃 리엑스, 슈퍼 쉬운 패턴을 사용하고 다른보기로 데이터를 보낼 수 있습니다. – TGarrett

답변

0

React가 한 구성 요소 계층 구조에서 다른 구성 요소 계층 구조 (예 : 반응 라우터 링크/내역 탐색)로 이동하면 새 구성 요소 계층 구조에 존재하지 않는 구성 요소 만 마운트 해제됩니다. 상태는 마운트되지 않은 구성 요소에서만 손실됩니다. 주 (state)가 최상위 레벨에 올바르게 저장되어 있고 재배치 (rerendering) 만하고 재 장착 (resounting)을하지 않으면 유지해야합니다.

+0

고마워요.하지만 반드시 반응 라우터가있는 최상위 레벨에 이 없습니까? 그래서 내 구성 요소가 낮은 수준에 있어야 할 것 ... 나는 또한 당신이 하나의 경로에 모든 것을 유지하고'props.params'를 사용할 수 있다는 것을 알았지 만, 이것이 좋은 생각인지 확신하지 못합니다 (https : /stackoverflow.com/a/36264389/143091). – jdm

+0

다시 말하자면 : 귀하의 주를 꼭대기에 올릴 필요는 없습니다 *. (url 경로에서) 반응 라우터에 의해 앱에 전달 된 속성이 변경되면서 마운트 해제를 거치지 않는 수준에서만 진행됩니다. – jlaitio

관련 문제