goBack() 이전에 내역을 확인하십시오. 반응 라우터 v4

Question

내 목표는 사용자가 돌아갈 경로/경로가 특정 카테고리에있는 경우에만 '뒤로 이동'버튼을 사용하는 것입니다.

더 정확하게는 두 가지 종류의 경로가 있습니다 : /<someContent> 및 /graph/<graphId>입니다. 사용자가 그래프 사이를 탐색 할 때 이전 그래프로 돌아갈 수는 있지만 /... 경로로 되돌아 갈 수 없어야합니다. 이것이 내가 단순히 history.goBack()을 실행할 수없는 이유입니다. 먼저 위치를 확인해야합니다.

const history = createHashHistory(); 
const router = (
     <ConnectedRouter history={history}> 
      <Switch> 
       <Route exact path='/' component={Home}></Route> 
       <Route exact path='/extension' component={Home}></Route> 
       <Route exact path='/settings' component={Home}></Route> 
       <Route exact path='/about' component={Home}></Route> 
       <Route exact path='/search' component={Home}></Route> 
       <Route exact path='/contact' component={Home}></Route> 
       <Route path='/graph/:entityId' component={Graph}></Route> 
      </Switch> 
     </ConnectedRouter> 
); 

나는 Graph 구성 요소에서 같은 것을 구현하고 싶습니다 : 제가 적용되어 있지 않은 경우는 "앞으로"버튼을 중지하려면로

는

if (this.props.history.previousLocation().indexOf('graph') > -1){ 
    this.props.history.goBack(); 
} else { 
    this.disableReturnButton(); 
} 

이 질문은 goForward()에 적용됩니다. 또한 사용자는 덜 자연의 느낌이 나는 그 방법을 알고 분명 내가 사용자가 주위를 이동할 때 localStorage 또는 REDUX store 로그인과 같은 측면 트릭을 사용하지 않도록하고 싶습니다 this.props.history.push(newLocation)

주변에 이동합니다.

Answer 1

Link 구성 요소 불구하고 심지어 history.push 불구하고 이동하는 동안, 당신은

<Link to={{pathname: '/graph/1', state: { from: this.props.location.pathname }}} /> 

또는

history.push({ 
    pathname: '/graph/1', 
    state: { 
     from: this.props.location.pathname 
    } 
}) 

같은 다른 Route 구성 요소에 현재 위치를 전달할 수 다음 당신은 할 수 구성 요소에서이 위치를 this.props.location.state && this.props.location.state.from과 같이 가져 와서 't to goBack 또는