Route

Le module react-router-dom premet de metre en place des route front et de cree une SPA (Single Page Application)

Mise en place du router

La premiere etapes est d'englober l'application dans BrowserRouter qui permettra d'utiliser differentes routes

1import { createRoot } from "react-dom/client";
2import { BrowserRouter } from "react-router-dom";
3
4import Blog from "src/components/Blog";
5
6const target = document.getElementById("root");
7
8const root = createRoot(target);
9
10root.render(
11  <BrowserRouter>
12    <Blog />
13  </BrowserRouter>
14);
15

Gestion des routes

Le composant Routes permet de determiner une liste de composant qui seront afficher sur des route

Le composant Route permet de decrire l'url et le composant qui sera afficher

Tout les composant a l'exterieur des balises Routes seront commun a tout les autre composant

Ici Header et Footer seront visible sur les routes Post, SingleArticle et NotFound

1import { Routes, Route } from "react-router-dom";
2
3import Header from "src/components/Header";
4import Posts from "src/components/Posts";
5import Footer from "src/components/Footer";
6import SingleArticle from "src/components/SingleArticle";
7import NotFound from "src/components/NotFound";
8
9function Blog() {
10  return (
11    <div className="blog">
12      <Header />
13
14      <Routes>
15        <Route path="/posts" element={<Posts />} />
16        <Route path="/article/:slug" element={<SingleArticle />} />
17        <Route path="*" element={<NotFound />} />
18      </Routes>
19
20      <Footer />
21    </div>
22  );
23}
24
25export default Blog;
26

NavLink et Link

Le module react-router-dom offre les balise NavLink et Link qui permette de remplacer les balise a en evitant de recharger ma page ce qui permet de crée une SPA

NavLink donne acces a une fonction de className pour gerer si la route est active ou non

1import { NavLink } from "react-router-dom";
2
3function Header() {
4  return (
5    <header className="menu">
6      <nav>
7        <NavLink
8          to="/"
9          className={({ isActive }) =>
10            isActive ? "menu-link menu-link--selected" : "menu-link"
11          }
12        >
13          {category.label}
14        </NavLink>
15        <button className="menu-btn" type="button">
16          Click
17        </button>
18      </nav>
19    </header>
20  );
21}
22
23export default Header;
24

useParams

Ce hook permet de recuperer les parametre des url

1import { useParams } from "react-router-dom";
2
3import Post from "../Post";
4import NotFound from "../NotFound";
5
6function SingleArticle({ posts }) {
7  const params = useParams();
8
9  const foundPost = posts.find((post) => post.slug === params.slug);
10
11  if (!foundPost) {
12    return <NotFound />;
13  }
14
15  return (
16    <div>
17      <Post postInfo={foundPost} />
18    </div>
19  );
20}
21
22export default SingleArticle;
23

useNavigate

Permet de crée une redirection

Ici si on click sur le bouton on sera rediriger sur une nouvelle route sans rechargement

1import { useNavigate } from "react-router-dom";
2
3function Posts() {
4  const navigate = useNavigate();
5
6  return (
7    <main>
8      <button type="button" onClick={() => navigate(`/article/toto`)}>
9        Click
10      </button>
11    </main>
12  );
13}
14
15export default Posts;
16

useLocation

Permet d'obtenir toutes les information comme l'url sur la quelle l'utilisateur ce situe

Ici a chaque fois que l'utilisateur changera de route le scroll de la page sera ramener en au de page

1import { Routes, Route, useLocation } from "react-router-dom";
2import { useEffect } from "react";
3
4import Menu from "src/components/Menu";
5import Home from "src/components/Home";
6import Recipe from "src/components/Recipe";
7import Error from "src/components/Error";
8
9function App() {
10  const location = useLocation();
11
12  useEffect(() => {
13    window.scrollTo(0, 0);
14  }, [location.pathname]);
15
16  return (
17    <div className="app">
18      <Menu />
19      <Routes>
20        <Route path="/" element={<Home />} />
21        <Route path="/recipe/:slug" element={<Recipe />} />
22        <Route path="*" element={<Error />} />
23      </Routes>
24    </div>
25  );
26}
27
28export default App;
29