J'essaie de créer une petite interface de jeu composée de pages différentes (menu de démarrage, écran de chargement, etc.).
de
Bien sûr, je ne veux pas que l'utilisateur puisse naviguer entre ces pages simplement en modifiant l'URL dans la barre d'adresse.
Existe-t-il un moyen d'ignorer / rejeter l'entrée de l'utilisateur dans la barre d'adresse et de naviguer sur les pages à partir du code?
Merci beaucoup d'avance! :)
3 Réponses :
Vous pouvez rediriger toutes les URL à votre page principale.
import {
Redirect
} from "react-router-dom";
<Redirect from={`${match.url}/`} to={`${match.url}/mainpage`} />
Cela empêchera toute autre page d'ouvrir de manière programmable à cause des redirects enverra les utilisateurs à la page principale.
Vous ne pouvez pas empêcher le navigateur d'ouvrir l'URL entrée dans la barre d'URL.
Vous pouvez avoir un drapeau dans l'état de l'application qui indique si la session en cours est initiée à partir de la page d'accueil et définissez-la sur Sachez qu'il ne sera pas possible de recharger les pages avec un accès limité en raison des restrictions implémentées.
PS: C'est une exigence assez confondante qui brise la manière dont le Web fonctionne.
Quelle est la raison de ça? true uniquement sur le composant Page d'accueil. Ensuite, vous pouvez ajouter la condition suivante aux composants de la page que vous souhaitez limiter l'accès à: si le drapeau est true , la page peut être ouverte, sinon une redirection à la page d'accueil.
J'ai pu faire cela par les étapes suivantes:
lastvisitedLocation , cette valeur est modifiée lorsqu'un utilisateur tape un lien. (Nous pouvons le mettre à jour de n'importe où dans l'application!)
- Le contexte expose également une fonction
enregistrement qui modifie la valeur précédente.
xxx
- envelopper le lien
à partir de réacteur-routeur-dom et modifiez le lastvisitedlocation chaque fois que nous appuyez sur un lien.
xxx
- Créez un crochet qui vérifie que l'utilisateur a précédemment navigué dans l'application et que nous ne sommes pas dans une route autorisée. Si nous détectons un accès direct via URL, lancez une erreur (nous pouvons essentiellement mettre en œuvre tout comportement souhaité).
xxx
- enveloppez votre interrupteur
dans le emplacementContextProvider .
xxx
- Protégez vos composants en appelant le crochet dans le niveau supérieur de la fonction
xxx Enfin, voici un Codes de travail Démo . J'ai utilisé le Nouvelle erreur par exemple pour marquer un itinéraire comme non navigable directement, mais vous pouvez fondamentalement faire n'importe quoi.
Je suis venu avec une idée qui pourrait résoudre un problème; Écrire un exemple de codesandbox