Dans react-router v2.4.0
ou au-dessus et avant v4
il y a plusieurs options
- Ajouter une fonction
onLeave
pourRoute
<Route
path="/home"
onEnter={ auth }
onLeave={ showConfirm }
component={ Home }
>
- Utiliser la fonction
setRouteLeaveHook
pourcomponentDidMount
Vous pouvez empêcher une transition de se produire ou demander à l'utilisateur de quitter une route avec un crochet de sortie.
const Home = withRouter(
React.createClass({
componentDidMount() {
this.props.router.setRouteLeaveHook(this.props.route, this.routerWillLeave)
},
routerWillLeave(nextLocation) {
// return false to prevent a transition w/o prompting the user,
// or return a string to allow the user to decide:
// return `null` or nothing to let other hooks to be executed
//
// NOTE: if you return true, other hooks will not be executed!
if (!this.state.isSaved)
return 'Your work is not saved! Are you sure you want to leave?'
},
// ...
})
)
Notez que cet exemple utilise le withRouter
composant d'ordre supérieur introduit dansv2.4.0.
Cependant, cette solution ne fonctionne pas parfaitement lors du changement manuel de l'itinéraire dans l'URL
Dans le sens où
- nous voyons la confirmation - ok
- le contenu de la page ne se recharge pas - ok
- L'URL ne change pas - pas d'accord
Pour react-router v4
utiliser l'invite ou l'historique personnalisé:
Cependant react-router v4
, c'est plutôt plus facile à implémenter avec l'aide de Prompt
from'react-router
Selon la documentation
Rapide
Utilisé pour inviter l'utilisateur avant de quitter une page. Lorsque votre application entre dans un état qui devrait empêcher l'utilisateur de s'éloigner (comme un formulaire à moitié rempli), affichez un fichier <Prompt>
.
import { Prompt } from 'react-router'
<Prompt
when={formIsHalfFilledOut}
message="Are you sure you want to leave?"
/>
message: chaîne
Message à inviter l'utilisateur lorsqu'il essaie de s'éloigner.
<Prompt message="Are you sure you want to leave?"/>
message: func
Sera appelé avec le prochain emplacement et l'action vers lesquels l'utilisateur tente de naviguer. Renvoie une chaîne pour afficher une invite à l'utilisateur ou true pour autoriser la transition.
<Prompt message={location => (
`Are you sure you want to go to ${location.pathname}?`
)}/>
quand: booléen
Au lieu de rendre conditionnellement un <Prompt>
derrière une garde, vous pouvez toujours le rendre mais passer when={true}
ou when={false}
empêcher ou autoriser la navigation en conséquence.
Dans votre méthode de rendu, vous devez simplement l'ajouter comme indiqué dans la documentation en fonction de vos besoins.
METTRE À JOUR:
Au cas où vous souhaiteriez avoir une action personnalisée à entreprendre lorsque l'utilisation quitte la page, vous pouvez utiliser l'historique personnalisé et configurer votre routeur comme
history.js
import createBrowserHistory from 'history/createBrowserHistory'
export const history = createBrowserHistory()
...
import { history } from 'path/to/history';
<Router history={history}>
<App/>
</Router>
puis dans votre composant, vous pouvez utiliser history.block
comme
import { history } from 'path/to/history';
class MyComponent extends React.Component {
componentDidMount() {
this.unblock = history.block(targetLocation => {
// take your action here
return false;
});
}
componentWillUnmount() {
this.unblock();
}
render() {
//component render here
}
}
componentWillUnmount() { if (confirm('Changes are saved, but not published yet. Do that now?')) { // publish and go away from a specific page } else { // do nothing and go away from a specific page } }
pour que vous puissiez appeler votre fonction de publication avant de quitter la page