react Link

reactLink.jsx

/*création des liens ----------------------------------------------------------*/
const PageLink = () => {
    return (
        
            <div>
                <NavLink exact to="/">Home</NavLink>
                <NavLink exact to="Works">Works</NavLink>
                <NavLink exact to="Contact">Contact</NavLink>
            </div>
 );
};
export default PageLink;

/*création des routes/Route: liens aux pages  que l'on affiche dans le main------------------------------------*/
import Home from './Pages/Home';
import Works from './Pages/Works';
import Contact from './Pages/Contact';
function PageLink() {
    return (
        
            <Routes>
                <Route path="/" element={<Home />}/>
                <Route path="works" element={<Works />}/>
                <Route path="contact" element={<Contact />}/>
            </Routes>
      
        
    );
}

export default PageLink;  

/*création de BroserRouter dans App-----------------------------------------------------------------*/
import {BrowserRouter,Routes,Route} from "react-router-dom";

<BrowserRouter>
    <Layout />
    <Routes>
      <Route path="/" element={<Home />}/>
      <Route path="works" element={<Works />}/>
      <Route path="contact" element={<Contact />}/>
    </Routes>
</BrowserRouter>

/*création d'un composant------------------------------------------------------------------------------*/
import React from 'react';

const Contact = () => {
    return (
        <h1>je suis le Contact</h1>
    );
};

export default Contact;