web-dev-qa-db-fra.com

Détecter le chemin précédent dans le routeur de réaction?

J'utilise le routeur de réaction. Je souhaite détecter la page précédente (au sein de la même application) d'où je viens. J'ai le routeur dans mon contexte. Mais, je ne vois aucune propriété comme "chemin précédent" ou historique sur l'objet routeur. Comment fait-on ça?

reactjsreact-router
21
vijayst

Vous pouvez enregistrer le chemin précédent dans une méthode componentWillReceiveProps. La logique est très proche de l'exemple fourni dans section de dépannage sur react-router docs.

<Route component={App}>
  {/* ... other routes */}
</Route>

const App = React.createClass({
  getInitialState() {
    return { prevPath: '' }
  },

  componentWillReceiveProps(nextProps) {
    if (nextProps.location !== this.props.location) {
      this.setState({ prevPath: this.props.location })
    }
  }
})

Et dernièrement, accédez-y à partir de l'état.

13
Alexandr Lazarev

Vous pouvez transmettre l'état à l'aide de la touche <Link> _ composant, dans ce cas un chemin:

<Link to={{pathname: '/nextpath', state: { prevPath: location.pathname }}}>Example Link</Link>

Vous pouvez alors accéder à prevPath à partir de this.props.location.state dans le composant suivant

27
Sam Logan

Si vous utilisez react-router-redux vous pouvez créer un réducteur qui se connecte aux événements envoyés par react-router-redux.

export default function routerLocations(state = [], action) {
  switch (action.type) {
    case "@@router/LOCATION_CHANGE":
      return [...state, action.payload]
    default:
      return state;
  }
}
24
Dan Andreasson

Si vous utilisez le <Redirect /> composant, vous pouvez ajouter une propriété from à ajouter à location.state dans le composant que vous redirigez.

// in the redirecting component
<Redirect
to={{
  pathname: '/login',
  state: { from: location }
}}
/>

//in the other component you redirected to
...
const { location } = props.location.state;
...
0
AV Paul