Lorsqu'il s'agit d'optimiser l'expérience utilisateur avec React Router v6.0.2, la détection des départs de page est cruciale. Nous présentons ici des stratégies pratiques pour mettre en œuvre des avertissem*nts de sortie de page, garantissant ainsi une expérience de navigation fluide et conviviale.
1. Améliorer l'Expérience Utilisateur : Mise en Place des Avertissem*nts de Sortie de Page avec React Router
Pour détecter le départ d'un utilisateur d'une page en React avec react-router, nous utilisons le composant Prompt fourni par react-router. Voici comment le mettre en œuvre :
import { Prompt } from 'react-router';
const MonComposant = () => (
<>
<Prompt when={devraitBloquerNavigation} message='Vous avez des modifications non enregistrées, êtes-vous sûr de vouloir partir?' />
{/* Votre JSX de composant */}
</>
);
Le paramètre when détermine si l'invite doit être affichée en fonction de la présence de modifications non enregistrées. Le paramètre message est le message affiché dans l'invite.
Pour bloquer la navigation, utilisez l'événement window.onbeforeunload dans la méthode componentDidUpdate de votre composant.
componentDidUpdate = () => {
if (devraitBloquerNavigation) {
window.onbeforeunload = () => true;
} else {
window.onbeforeunload = undefined;
}
}
Assurez-vous de nettoyer l'événement window.onbeforeunload dans la méthode componentWillUnmount pour éviter les fuites de mémoire.
componentWillUnmount() {
window.onbeforeunload = null;
}
Cette approche affiche une boîte de dialogue native du navigateur lorsque l'utilisateur tente de quitter la page avec des modifications non enregistrées.
2. Améliorer l'Expérience Utilisateur : Afficher un Avertissem*nt pour les Données de Formulaire Non Enregistrées à la Sortie de la Page
Pour afficher un avertissem*nt pour les données de formulaire non enregistrées à la sortie de la page, créez un composant FormPrompt.
import { useEffect } from "react";
export const FormPrompt = ({ hasUnsavedChanges }) => {
useEffect(() => {
const onBeforeUnload = (e) => {
if (hasUnsavedChanges) {
e.preventDefault();
e.returnValue = "";
}
};
window.addEventListener("beforeunload", onBeforeUnload);
return () => {
window.removeEventListener("beforeunload", onBeforeUnload);
};
}, [hasUnsavedChanges]);
return null;
};
Utilisez ce composant dans vos formulaires pour avertir les utilisateurs des modifications non enregistrées.
<FormPrompt hasUnsavedChanges={isDirty} />
Maintenant, lorsque les utilisateurs ont des modifications non enregistrées et tentent de quitter la page, une boîte de dialogue de confirmation apparaîtra.
3. Améliorer l'Expérience Utilisateur avec le Hook useBeforeUnload de React Router pour la Préservation de l'État
Le hook useBeforeUnload de React Router est une manière pratique de travailler avec l'événement window.onbeforeunload. Il vous permet de sauvegarder l'état important de l'application sur une page web, comme dans le stockage local du navigateur, avant qu'un utilisateur ne quitte la page.
import { useBeforeUnload } from "react-router-dom";
function MonFormulaire() {
const [state, setState] = React.useState(null);
useBeforeUnload(React.useCallback(() => {
localStorage.stuff = state;
}, [state]));
React.useEffect(() => {
if (state === null && localStorage.stuff != null) {
setState(localStorage.stuff);
}
}, [state]);
return <>{/*... */}</>;
}
En utilisant useBeforeUnload, vous vous assurez que si les utilisateurs reviennent sur votre page, vous pouvez facilement restaurer leurs informations d'état précédentes, améliorant ainsi l'expérience utilisateur globale.
Conclusion
En mettant en œuvre ces stratégies avec React Router v6.0.2, vous pouvez créer une expérience utilisateur exceptionnelle, avec des avertissem*nts précis et personnalisés pour les départs de page. Choisissez la stratégie qui correspond le mieux à vos besoins et offrez à vos utilisateurs une navigation sans heurts et sécurisée.
FAQs
React Router, a declarative and modular library for React, simplifies routing by specifying route appearance rather than navigation details. Its modularity allows selective feature usage, enhancing efficiency.
Do I need react-router-dom and react router? ›
Even on mobile applications with React Native, react-router-native is enough, for the same reason as react-router-dom is enough in web apps. Because of that, there is no need to import the react-router package directly anywhere, as react-router-dom and react-router-native provide all the required functionalities.
What is the command for react-router-dom v6? ›
- Step 1: Installing React Router. To install React Router, you'll need Node.js installed for the npm command line tool, after which you have to run the following command: npm install react-router-dom. ...
- Step 2: Adding React Router. ...
- Step 3: Routing and Rendering Components.
React Outlet is used within the AllRoutes component to render child routes within a parent route. It allows for the modularization of routes, making it easier to manage complex navigation structures. Nested routes can have their own layouts and functionality while still being part of a larger parent route.
Why is React routing better from conventional routing? ›
Unlike static routing where routes have to be defined previously along with route handlers, React allows us to load different components conditionally without disturbing the layout of the page or loading a new page.
What are the two types of routing you can have on a Router? ›
Static routing uses a single preconfigured route to send traffic to its destination, while dynamic routing provides multiple available routes to the destination.
- Path selection. ...
- Ability to update routes. ...
- Routing tables. ...
- Use of protocols and algorithms. ...
- Computation and bandwidth requirements. ...
- Security. ...
- Use cases.
The Router in React JS is a pure JavaScript package that allows you to use React to create complicated client-side apps. Initially launched in 2013, it has become one of the most prominent routing libraries in today's online applications.
What can I use instead of useHistory? ›
In this article, we will learn how to replace the useHistory hook in React. With the introduction of new versions of React Hooks, useNavigate in React replaced the useHistory hook. useNavigate hook is a React hook that allows you to navigate your application imperatively.
What can I use instead of React router Dom? ›
What is Wouter?
- Zero Dependencies- gzipped to 1308 bytes in compared to 11 kb of React Router.
- In addition to React, Wouter also supports the alternative to React- Preact (through wouter-preact package)
- The <Router /> component is completely optional in Wouter.
- Wouter has hooks API, rendering more control over routing.
However, with the introduction of react-router v6, the Navigate component has taken its place. The migration process involves replacing instances of the Redirect component with the Navigate component or using the useNavigate hook for more complex redirection logic.
To get the current route in React Router, we use the useLocation() route. useLocation() returns an object that contains information on the current page URL.
How do I pass data through my react-router-Dom? ›
URL Parameters: You can pass data between pages using URL parameters. In the sending page, you can add the data to the URL as a parameter, and in the receiving page, you can access the parameter from the props. match. params object.
What is nested routing? ›
A nested route is a section of a website layout that responds to changes in the route. When moving from one URL to another in a single-page application, there is no need to render the full page; only the parts of the page that are dependent on that URL change.
What is the browser router routing? ›
BrowserRouter: BrowserRouter is a router implementation that uses the HTML5 history API (pushstate, replacestate, and popstate events) to keep your UI in sync with the URL. It is the parent component used to store all other components. Route: This is a new component introduced in v6 and an upgrade of the component.
How do I setup my react router? ›
React Router Tutorial
- Step 1: Build an App. js React component. In the src directory, create one component file called App. ...
- Step 2: Make three components. First, make one components directory and in that make Home. js component. ...
- Step 3: Register the routes in the App. js file. // App.
Routers refer to internal routing tables to make decisions about how to route packets along network paths. A routing table records the paths that packets should take to reach every destination that the router is responsible for. Think of train timetables, which train passengers consult to decide which train to catch.
What is the difference between react router and Expressjs? ›
react-router is used to navigate between multiples pages of your front-end app or website, usually in a single page app (SPA), where pages are loaded dynamically (not all the page is reloaded). express router is a way to return static content (index. html, image. png...)
What is the difference between Router and routing protocol? ›
Routing protocols are simply the algorithms used by the router in order to communicate with each other by sharing information about the best route to the destination. In comparison, a routable protocol is a network protocol that can be routed between networks within an internetwork in order to route the packets.
