web-dev-qa-db-fra.com

Vérifier l'historique de l'emplacement précédent avant que goBack () ne réagisse au routeur v4

Mon objectif est d'activer un bouton "Retour", mais uniquement si l'itinéraire/le chemin vers lequel l'utilisateur retournerait appartient à une certaine catégorie.

Plus précisément, j'ai deux types de routes: /<someContent> Et /graph/<graphId>. Lorsque l'utilisateur navigue entre les graphiques, il doit pouvoir revenir au graphique précédent mais pas à une route /.... C'est pourquoi je ne peux pas simplement exécuter history.goBack(), je dois d'abord vérifier l'emplacement.

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>
);

Je voudrais implémenter quelque chose comme ça dans le composant Graph:

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

Cette question s'applique également à goForward() car je voudrais désactiver le bouton "Suivant" s'il ne s'applique pas. L'utilisateur se déplace également avec this.props.history.Push(newLocation)

Évidemment, j'aimerais éviter d'utiliser des astuces comme la connexion à localStorage ou à un redux store lorsque l'utilisateur se déplace, cela semble moins naturel et je sais comment le faire.

javascriptreactjsecmascript-6react-router
12
ted

Lors de la navigation via le composant Link ou même si history.Push, vous pouvez passer l'emplacement actuel à un autre composant Route

comme

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

ou

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

et vous pouvez simplement obtenir cet emplacement dans votre composant comme this.props.location.state && this.props.location.state.from puis décidez si vous ne voulez pas goBack ou non

11
Shubham Khatri