web-dev-qa-db-ja.com

goBack（）がルーターv4に対応する前に、以前の場所の履歴を確認する

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

より正確には、_/<someContent>_と_/graph/<graphId>_の2種類のルートがあります。ユーザーがグラフ間を移動すると、_/..._ルートではなく前のグラフに戻ることができるはずです。これが、単に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()にも適用されます。該当しない場合は「進む」ボタンを無効にしたいのです。また、ユーザーはthis.props.history.Push(newLocation)で動きます

明らかに、ユーザーが動き回るときにlocalStorageやredux storeにログインするなどのサイドトリックの使用を避けたいと思います。

javascriptreactjsecmascript-6react-router
12
ted

Linkコンポーネントまたはhistory.Push、現在の場所を別のRouteコンポーネントに渡すことができます

のような

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

または

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

そして、あなたはコンポーネントのこの場所をthis.props.location.state && this.props.location.state.fromそしてgoBackにしたくないかどうかを決めます

11
Shubham Khatri