반응형
리디렉션 후 구성 요소의 이.props.location에 액세스할 수 없음
컴포넌트 1의 어딘가에 다음과 같은 것이 있다.
if (redirectToReferrer) {
return <Redirect to={{
pathname: "/test/new",
state: { event: "test" }
}} />;
}
내 컴포넌트 2에는 다음과 같은 내용이 있다.
constructor(props){
super(props);
console.log(this.props.location) //undefined
}
문서에 따르면, 이것은 효과가 있을 것이다.
상태 개체는 리디렉션된 구성요소에 있는 이.props.location.state를 통해 액세스할 수 있다.이 새로운 레퍼러 키(특별한 이름이 아님)는 '/login' 경로 이름으로 가리키는 로그인 구성 요소의 이.props.location.state.referer를 통해 액세스된다.
왜 그럴까?this.props.location
정의되지 않은?
"/테스트/신규"가 에 의해 정의되었는지 확인<Route/>
App.js의 구성요소 또는 경로를 정의한 곳.
<Route path="/test/new" component={NewTestComp}/>
렌더 방법을 사용하여 정의한 경우 이렇게 구성요소에 소품을 전달하십시오.
<Route path="/test/new" render={(props) => <NewTestComp {...props}/>}/>
다음과 같이 직접 배선된 기술 구성 요소:
<Route path="/about" component={About} />
위치 등 리액션 라우터에 의해 제공되는 소품을 가지고 있으므로 리디렉션할 때마다 해당 구성요소에 경로가 정의되어 있는지 확인하십시오.
react-router-dom의 최신 버전으로 업그레이드하십시오.현재 버전 5.2.0
반응형
'programing' 카테고리의 다른 글
urllib, urllib2, urllib3 및 요청 모듈의 차이점은 무엇인가? (0) | 2022.03.12 |
---|---|
Electronic Menu 클릭() 이벤트를 사용하여 Vue 경로를 변경하려면 어떻게 해야 하는가? (0) | 2022.03.12 |
"삽입 시 탭 및 공간 사용 제한" (0) | 2022.03.12 |
뉴라인 없이 인쇄(인쇄 'a'), 인쇄 공간, 제거 방법? (0) | 2022.03.12 |
반응 기본 약속 값을 변수에 문자열로 전달 (0) | 2022.03.11 |