Nous avons implémenté notre navigation applicative à l'aide de react-router.
Existe-t-il un moyen de bloquer la navigation de l'utilisateur (y compris les boutons avant et arrière) sans aucune invite de réaction.
Fonction d'abonnement au bloc d'historique de react-router que je ne peux pas utiliser car elle lancera une invite par défaut. Dans mon cas, je souhaite afficher ma boîte de dialogue personnalisée.
5 Réponses :
Vous pouvez ajouter un écouteur d'événement popState pour figer la navigation.
const Home = ({ history }) => {
useEffect(() => {
const browserNavigationHandle = () =>
window.history.pushState(null, null, document.URL);
window.history.pushState(null, null, document.URL);
window.addEventListener("popstate", browserNavigationHandle);
return () =>
window.removeEventListener("popstate", browserNavigationHandle);
}, []);
return <div>Home</div>;
};
export default Home;
mais cela semble altérer l'histoire. Existe-t-il un moyen légitime de le faire pour les grandes applications d'entreprise sans casser aucune autre fonctionnalité standard?
Je pense qu'il est possible d'utiliser history.replaceState au lieu de history.pushState
Pour désactiver le bouton de retour, vous pouvez faire le code ci-dessous dans un composant d'ordre supérieur
componentDidMount() {
const { history } = this.props;
window.addEventListener("popstate", () => {
history.go(1);
});
}
mais ce composant doit être un composant Route
Il n'y a aucun moyen de bloquer la navigation du navigateur d'un utilisateur, car cela enlèverait tout contrôle d'un utilisateur et pourrait être utilisé de manière très malveillante. Ce que vous pouvez faire, c'est empêcher votre application de changer.
Une façon pourrait être d'écouter les modifications de l'historique et de revenir à la page sur laquelle l'utilisateur devrait se trouver. Le problème avec cela est le rendu et vous pourriez perdre des états, en fonction de votre application.
Une autre façon pourrait être (comme je n'ai pas essayé cela auparavant) d'utiliser un objet d'historique personnalisé. Découvrez comment configurer le routeur avec l'historique. Comme on le voit dans leur exemple:
import React from "react";
import ReactDOM from "react-dom";
import { Router } from "react-router";
import { createBrowserHistory } from "history";
const history = createBrowserHistory();
ReactDOM.render(
<Router history={history}>
<App />
</Router>,
node
);
Il peut y avoir un moyen de personnaliser cet objet d'historique afin que vous puissiez contrôler sa modification et la réponse des applications.
Ajoutez simplement useHistory().go(1) fonctionne pour moi.
utilisez ceci pour empêcher le routage
window.addEventListener('beforeunload', (event) => {
event.preventDefault();
event.stopPropagation();}
Vous voulez dire le navigateur natif back / forw?
Oui. Je veux que les deux navigations soient arrêtées sur booléen. et ils ne devraient afficher aucune invite. je veux montrer notre propre boîte de dialogue personnalisée pour cela.
Ce n'est pas possible pour des raisons de sécurité
avez-vous essayé
routerWillLeavederouterWillLeave-router?Si vous avez besoin d'afficher une invite personnalisée, vous pouvez utiliser "react-router-navigation-prompt"