2017-12-23 3 views
2

반응, 나는 검색 창을 만들고 내 검색 창은 다음과 같이 내 검색 결과에 링크가 있습니다리디렉션 태그에서 돌아 간다 - 현재 라우터

render() { 
if (this.props.itemsFetchSuccess) { 
    return (
    <Redirect to={{ 
     pathname: '/search', 
     search: `?item-name=${this.props.searchQuery}` 
    }} /> 
); 

내 검색 막대의 렌더링 구성 요소의 일부로 .

GOOGLE CHROME MAIN -> MAIN LANDING -> SEARCH RESULTS.

하지만 React-Router v4에서 리디렉션 태그를 사용했기 때문에 브라우저 기록 스택에 리디렉션 태그를 추가하지 않은 것으로 의심됩니다. 검색 결과 페이지에서 브라우저를 다시 누르면 이전 방문 페이지 (예 : 기본 방문)로 돌아 가지 않지만 기본 방문 전에 페이지로 돌아갑니다.

링크 태그를 사용해도 시도했지만 링크가 생성되고 검색 결과가 완료되면 실제로 리다이렉트하지 않기 때문에 더 좋은 방법은 없습니다.

감사합니다.

+0

잘 이해하는지 모르겠지만 아마도 'window.location.href'가 답이 될 수 있을까요? – TamirNahum

+0

내 말은 검색 표시 줄을 클릭하면 API에서 데이터를 요청하는 redux 호출이 만들어져 완료 될 때 바로로드됩니다. 그러나 동일한 "경로 이름, 검색 필드"를 유지하기 위해 라우팅이 필요하기 때문에 리디렉션 태그없이 다른 방법을 찾으려고합니다. – efxgamer

답변

1

Redirecthistory stack에서 현재 항목을 무시하고 따라서 당신은 역사 스택의 현재 위치를 탐색 할 수 없습니다.

documentation

대신, 프로그램 componentWillReceiveProps 기능에 history.push()를 사용하여 탐색 할 수 있습니다 참조하십시오.

componentWillReceiveProps(nextProps) { 
    if(nextProps.itemsFetchSuccess !== this.props.itemsFetchSucess && nextProps.itemsFetchSuccess) { 
     this.props.history.push({ 
       pathname: '/search', 
       search: `?item-name=${nextProps.searchQuery}` 
     }) 
    } 
} 

P. history.push을 사용하는 구성 요소가 연결된 구성 요소 또는 withRouter을 사용하여 라우터 소품을 받고 있는지 확인하십시오. how to programmatically navigate using React-router에 대한 자세한 내용은이 답변을 확인하십시오.

1

이 시도 :

this.props.history.push(`/search?item-name=${this.props.searchQuery}`); 
관련 문제