goBack（）の前に履歴をチェックするv4

Question

私の目標は、「戻る」ボタンを有効にすることですが、ユーザーが戻ってくるルート/パスが特定のカテゴリにある場合のみです。

もっと正確には私は2種類のルートを持っています：/<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からgoBackまで