Dans cet article, nous plongerons dans les profondeurs de la nouvelle version de React Router Dom, publiée le 18 janvier 2023. Nous explorerons les différences notables entre cette version et ses prédécesseurs, examinant attentivement ses avantages, inconvénients, et comment l'intégrer efficacement dans vos projets React.
Installation de React Router
Commencez par créer une application React avec la commande suivante :
npx create-react-app myapp
Une fois l'application créée, installez React Router via la commande :
npm install react-router-dom
Pour les utilisateurs de Yarn, la commande serait :
yarn add react-router-dom
Configuration de React Router Dom
Après l'installation, ajustez votre application React. Créez un composant global Router et ajoutez le code de base nécessaire :
import React from 'react';
function Router() {
return (
<div>
Router
</div>
);
}
export default Router;
Création des Pages
Dans le dossier "pages" de votre structure React, créez les composants Home, Blog, et About. Chaque composant doit contenir le code de base du composant React, avec le nom du composant correspondant (par exemple, Home) :
import React from 'react';
function Home() {
return (
<div>
Home
</div>
);
}
export default Home;
Définition des Routes
Importez createBrowserRouter, RouterProvider, et les composants des pages dans votre fichier principal Router. Créez ensuite les routes et utilisez-les dans le RouterProvider :
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Home from "./pages/Home";
import Blog from "./pages/Blog";
import About from "./pages/About";
const routerData = createBrowserRouter([
{ path: "/", element: <Home /> },
{ path: "/about", element: <About /> },
{ path: "/blog", element: <Blog /> },
]);
function Router() {
return <RouterProvider router={routerData} />;
}
export default Router;
Intégration dans l'Application
Importez le Router dans votre composant App et insérez-le directement au sommet de votre composant App :
import React from 'react';
import Router from './Router';
function App() {
return (
<div>
<Router />
App
</div>
);
}
export default App;
Avantages et Inconvénients de React Router Dom 6.7.0
Points Forts
UnmountOnExit : Permet de spécifier si un composant doit être démonté à la sortie de la route, améliorant ainsi les performances.
UseNavigate Hook : Facilite la navigation programmable vers une autre route dans une application React, simplifiant la gestion des interactions utilisateur.
Correction de Bugs : Résolution de problèmes liés à et , améliorant la navigation et la correspondance des routes.
Points Faibles
Non Compatibilité Ascendante : Nécessite une mise à jour du code en raison de l'incompatibilité avec les versions précédentes de React Router.
Dépendance à React 17 : Compatible uniquement avec la dernière version de React, nécessitant une installation à jour.
Possibles Problèmes avec React Mise à Jour : En tant que bibliothèque tierce, des bugs peuvent survenir en raison de divergences avec les dernières versions de React.
En résumé, React Router Dom version 6.7.0 offre des fonctionnalités puissantes pour le routage côté client dans les applications React. Malgré ses avantages, les développeurs doivent être conscients des ajustements nécessaires et des potentielles incompatibilités lors de la mise à jour.
After creating your react application, Simply type npm install react-router-dom in your project terminal to install React Router, and then wait for the installation to finish. Use the yarn add react-router-dom command if you're using yarn.
react-router-dom installs react-router as a dependency, so there is no need to re-install and import anything directly from the 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.
react-router-dom re-exports all of react-router's exports, so you only need to import from react-router-dom in your project. Found this in the Github. Note: This package provides the core routing functionality for React Router, but you might not want to install it directly.
You can check the installed version by running npm list react-router-dom` from the project directory. If the package. json file entry for react-router-dom is correct then you may just have forgotten to run npm install to install the dependencies. Run npm i to install the project's dependencies.
React automatically updates the DOM to match your render output, so your components won't often need to manipulate it. However, sometimes you might need access to the DOM elements managed by React—for example, to focus a node, scroll to it, or measure its size and position.
To access the current URL in a React application, React Router provides several hooks and components. One of the most commonly used hooks is useLocation. This hook returns a location object that contains information about the current URL.
React Router handles routing and navigation, allowing you to define different paths and components for each route. On the other hand, React DOM is responsible for rendering components to the browser, ensuring that the user interface is displayed correctly.
In Summary, react-dom is mainly responsible for rendering React components into the DOM and handling lifecycle methods, while react-router-dom provides routing capabilities and supports different types of routing methods in a React application.
The current docs are for React 18. For React 17, see https://17.reactjs.org. See our FAQ for information about our versioning policy and commitment to stability.
For npm install specific version, use npm install [package-name]@[version-number]. Use npm view [package-name] version to know the specific latest version of a package available on the npm registry. Use npm list [package-name] to know the specific latest version of an installed package.
You can check the installed version by running npm list react-router-dom` from the project directory. If the package. json file entry for react-router-dom is correct then you may just have forgotten to run npm install to install the dependencies. Run npm i to install the project's dependencies.
js import React, { Component } from "react"; import { BrowserRouter as Router, Routes, Route, Link, } from "react-router-dom"; import Home from "./component/home"; import About from "./component/about"; import Contact from "./component/contact"; import "./App.
React Router DOM is an npm package that enables you to implement dynamic routing in a web app. It allows you to display pages and allow users to navigate them. It is a fully-featured client and server-side routing library for React.
React Router is a JavaScript framework that lets us handle client and server-side routing in React applications. It enables the creation of single-page web or mobile apps that allow navigating without refreshing the page. It also allows us to use browser history features while preserving the right application view.
Hobby: Calligraphy, Rowing, Vacation, Geocaching, Web surfing, Electronics, Electronics
Introduction: My name is Msgr. Benton Quitzon, I am a comfortable, charming, thankful, happy, adventurous, handsome, precious person who loves writing and wants to share my knowledge and understanding with you.
We notice you're using an ad blocker
Without advertising income, we can't keep making this site awesome for you.
