Utilisation du React Router dans une application React

Dans cet article, nous allons apprendre à créer des liens entre différentes pages dans une application React en utilisant le package react-router-dom. Vous découvrirez comment installer React Router, configurer des routes et créer des liens entre vos composants React.

Installation de React Router

Pour commencer, vous devez installer le package react-router-dom dans votre projet React. Vous pouvez le faire en utilisant npm ou yarn :

• Avec npm : npm install react-router-dom
• Avec yarn : yarn add react-router-dom

Configuration des Routes dans l’Application

Après avoir installé React Router, configurez les routes dans votre fichier principal (généralement App.js), en définissant quel composant doit être rendu pour chaque chemin.

• Importez et configurez <Router>, <Routes>, et <Route> pour définir vos chemins.

Voici le contenu du fichier App.js :

import React, { Suspense, useEffect } from 'react';
import { HashRouter, Route, Routes } from 'react-router-dom';
import { useSelector } from 'react-redux'; 
import { ToastContextProvider } from './ToastContext'; 
import { CSpinner, useColorModes } from '@coreui/react'; 
import './scss/style.scss';

// Containers
const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'));

// Pages
const Login = React.lazy(() => import('./views/Login'));
const Register = React.lazy(() => import('./views/pages/Register'));
const Page404 = React.lazy(() => import('./views/pages/Page404'));
const Page500 = React.lazy(() => import('./views/pages/Page500'));

// Protected Route Component
import ProtectedRoute from './components/ProtectedRoute'; 
import {I18nextProvider} from "react-i18next"; 
import i18n from './i18n';

const App = () => { 
  const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme'); 
  const storedTheme = useSelector((state) => state.theme);

  useEffect(() => { 
    const urlParams = new URLSearchParams(window.location.href.split('?')[1]); 
    const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]; 
    if (theme) { 
      setColorMode(theme); 
    }

    if (isColorModeSet()) { 
      return; 
    }

    setColorMode(storedTheme); 
  }, []); {/* eslint-disable-line react-hooks/exhaustive-deps */}

  return ( 
    <HashRouter>
      <I18nextProvider i18n={i18n}>
        <ToastContextProvider>
          <Suspense 
            fallback={
              <div className="pt-3 text-center">
                <CSpinner color="primary" variant="grow" /> 
              </div> 
            }
          >
            <Routes>
              <Route path="/login" element={<Login />} />
              <Route path="/register" element={<Register />} />
              <Route path="/404" element={<Page404 />} />
              <Route path="/500" element={<Page500 />} />

              {/* Protected route for authenticated users */}
              <Route path="*" element={<ProtectedRoute element={DefaultLayout} />} />
            </Routes>
          </Suspense>
        </ToastContextProvider>
      </I18nextProvider>
    </HashRouter>
  ); 
};

export default App;

Le fichier routes.js liste les routes protégées

import React from 'react'

const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
const Widgets = React.lazy(() => import('./views/widgets/Widgets'))
const Profile = React.lazy(() => import('./views/pages/Profile'))

const routes = [
  { path: '/', exact: true, name: 'Home' },
  { path: '/dashboard', name: 'Dashboard', element: Dashboard },
  { path: '/widgets', name: 'Widgets', element: Widgets },
  { path: '/profile', name: 'Profile', element: Profile },
]

export default routes

Création de Liens Navigables

Utilisez le composant <Link> de react-router-dom pour créer des liens navigables entre vos composants. L'attribut to précise le chemin vers lequel aller.

// Dans src/components/Home.js
import React from 'react';
import { Link } from 'react-router-dom';

const Home = () => { 
  return (
    <div>
      <Link to="/profile">Accéder au Profile</Link>
    </div>
  );
};

export default Home;

Il est également possible de créer un lien sur un élément React qui n'est pas de type Link. Dans un tel cas, on précise via l'attribut "as" que l'on fait passer cet élément pour un élément de type Link

 <CDropdownItem as={Link} to="/profile">

Exemple Complet

En combinant tous les éléments ci-dessus, vous aurez une application fonctionnelle avec navigation entre composants via React Router.

Conclusion

React Router est un outil puissant pour gérer les différents composants et vues au sein d’une application, permettant une navigation fluide et interactive. N'hésitez pas à explorer davantage ses fonctionnalités comme les routes imbriquées, les paramètres de route et les redirections.

Si vous avez des questions ou souhaitez partager vos expériences, laissez-nous un commentaire ci-dessous !