반응 라우터가 표시되지 않으면 어떻게 해야 합니까?

라우터가 표시되지 않는 것에 대응하는 솔루션: 1. 상위 라우팅 구성 요소에 browserRouter를 추가하여 라우터를 래핑합니다. 2. "this.props.history.go()"를 사용하여 구성 요소를 새로 고칩니다. 3. 브라우저 라우터 매개 변수 "forcerefresh="를 추가합니다. {true}"; 4. ""에 후크 함수를 작성하고 이 경로를 나가거나 들어올 때 호출합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

리액트 라우터가 표시되지 않으면 어떻게 해야 하나요?

react-router-dom 경로 점프 구성 요소가 문제를 표시하지 않습니다.

Scenario

Link to 또는 this.props.history.push를 사용하여 점프하는지 여부에 관계없이 Sun 경로를 사용하여 상위 경로로 점프할 때, Url 주소 표시줄 모든 것이 변경되었지만 페이지 구성 요소를 로드할 수 없으며 페이지가 새로 고쳐지지 않습니다. 상위 경로, 동일한 점프 위치에서 링크를 클릭하면 URL은 변경되지 않고 페이지는 새로 고쳐지지 않지만 구성 요소는 로드됩니다.

점프 지점과 대상 경로에서 this.props를 확인하고 this.props.history가 점프 후 점프 후 경로가 되었지만 this.props.location은 여전히 ​​원래 경로와 일치하는 것을 확인하세요. 구성요소를 정상적으로 로드하는 페이지의 경우 기록과 위치가 동일한 경로입니다.

Solution

블로거 Baidu는 진짜 이유를 찾기까지 오랜 시간 동안 다양한 방법을 시도했지만, 물론 그 외에도 많은 흥미로운 방법을 얻었습니다.

진짜 이유

는 React-router-dom에서 BrowserRouter를 남용했기 때문입니다. 블로거는 동영상을 보면서 라우팅을 배웠기 때문에 기능을 잘 알지 못해 상위 라우팅에 browserRouter를 추가했습니다. 그런 다음 하위 경로도 손자 경로에 연결되므로 브라우저 라우터를 사용하여 하위 경로를 래핑하고 손자 경로로 점프하는 데 문제가 없습니다. 동일한 수준의 하위 경로가 하위 경로로 점프하는 데 문제가 없습니다. 상위 경로는 구성 요소를 로드할 수 없습니다. 상위 루트가 하위 루트와 손자 루트로 점프하는 것은 문제가 되지 않습니다. 이것이 이 구덩이의 특징이다.

그래서 라우팅 정보는 주로 브라우저 라우터에 포함되어 있다고 추정합니다. 브라우저 라우터가 하위 경로에 포함되면 상위 계층 브라우저 라우터의 정보가 손실됩니다.

Baidu

this.props.history.go()를 사용하여 구성 요소를 새로 고칠 수 있습니다. 이동 괄호 안의 숫자는 이전 페이지와 다음 페이지를 나타냅니다. 새로 고쳐야 하는 경우 사용할 수 있습니다.

빈 페이지로 점프한 후 다시 점프하는 방법을 사용하는데, 블로거가 시도했지만 작동하지 않는 것 같습니다.

browserrouter 매개변수에 forcerefresh={true}를 추가하면 아래 패키지의 각 경로 점프가 새로 고쳐지도록 할 수 있습니다.

이 경로를 떠나거나 들어갈 때 호출되는 후크 함수를 작성할 수도 있습니다. 예를 들어 권한이 있는 경로를 입력하는 경우 myfunc에 onEnter={myfunc} 권한 확인을 추가할 수 있습니다. 확인을 통과하지 못한 경우 this.props.history를 교체하고 점프하여 목적을 달성합니다.

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응 라우터가 표시되지 않으면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!