3
votes

this.props.history.push () ne semble plus fonctionner dans React Router v4, quelle est l'alternative?

Je suis nouveau dans React, et la plupart des tutoriels que je vois sur la redirection à l'aide de React Router semblent utiliser l'extrait de code ci-dessus. Ce que j'essaie de réaliser, c'est de rediriger l'utilisateur vers la page d'accueil de mon site Web après une connexion réussie. J'ai essayé history.push mais selon mes recherches google, cela ne fonctionne plus dans Router v4. Que puis-je faire comme alternative? Je suis ouvert aux solutions avec état et sans état.

Pour clarifier, voici le flux de travail -

L'utilisateur remplit une zone de texte avec son nom d'utilisateur
L'utilisateur remplit une zone de texte avec son mot de passe
L'utilisateur clique sur le bouton d'envoi
Une API est appelée avec le nom d'utilisateur et le mot de passe pour authentifier l'utilisateur
L'API renvoie une réussite en cas de connexion réussie
Une fois la connexion réussie, l'utilisateur est redirigé vers la page d'accueil

reactjs react-router react-router-v4 redirect

0 commentaires

3 Réponses :

0
votes

Vous pouvez utiliser le composant Redirect. https://reacttraining.com/react-router/web/api/Redirect

0 commentaires

0
votes

history.push (location) peut toujours être utilisé

https://reacttraining.com/react-router/core/api/history/history-is-mutable

// usually all you need
<Link to="/somewhere"/>

// but you can use a location instead
const location = {
  pathname: '/somewhere',
  state: { fromDashboard: true }
}

<Link to={location}/>
<Redirect to={location}/>
history.push(location)
history.replace(location)

0 commentaires

1
votes

history.push ('./ path') est toujours utilisable dans React Router v4, vous devez ajouter withRouter

exemple

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import compose from 'recompose/compose'

class Test extends Component {
  render () {
    const { history } = this.props

    return (
     <div>
       <Button onClick={() => history.push('./path')}
     </div>
    )
  }
}

export default compose(
  withRouter,
)(Test)

0 commentaires