Comment utiliser correctement le composant de lien React-Router-Dom avec RouterProvider ?

Question

Je suis en train d'apprendre la dernière version de React et de React-Router-Dom, je crée une application de démonstration simple.

Home.jsx

import React from "react";

const Home = () => {
  return (
    Accueil
  )
}

export default Home;

About.jsx

import React from "react";

const About = () => {
  return (
    À propos
  )
}

export default About

index.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider, Link } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

const router = createBrowserRouter([
  {
    path: "/",
    element: 
  },
  {
    path: "/about",
    element: 
  }
]);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(

      Accueil
      À propos

);

mais il n'affiche pas le lien, il affiche simplement le contenu dans le composant Home ou About. Aucune erreur dans la console.

J'ai beaucoup cherché et je n'ai pas trouvé quel est le problème du code ci-dessus.

Answer 1

Vous ne devriez pas utiliser de lien à l'intérieur du RouterProvider, utilisez-le dans n'importe quel composant.

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(

);

Sur la page d'accueil, vous pouvez créer un lien

import React from "react";
import { Link } from "react-router-dom";

const Home = () => {
  return (

    Home
    About

  )
}

export default Home;

Answer 2

Veuillez vous assurer de vérifier votre fichier package.json pour vous assurer que vous avez installé avec succès react, react-dom et react-router-dom. Si ils sont installés correctement, vous pouvez importer ReactDOM de cette manière: 'import ReactDOM from "react-dom"'. Si cela ne fonctionne toujours pas, alors importez Outlet de react-router-dom. Vous n'utilisez pas de composant Outlet pour spécifier où le contenu correspondant doit être rendu. Dans ce cas, vous devriez envelopper votre balise Link dans un composant Outlet comme ceci:

      Accueil
      À propos