App.

js

Src/App.js

Importation react-router-dom

import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";

Librairie react pour naviger entre les page

Importation style

import "./assets/css/flex-slider.css"
import "./assets/css/fontawesome.css"
import "./assets/css/owl.css"
import "./assets/css/bootstrap.css"
import "./Style.css"

importation page et composant a afficher

import Footer from "./components/Footer/Footer";

import Navbar from "./components/Navbar/Navbar";
import Home from "./pages/Home/Home";
import Product from "./pages/Product/Product";
import Products from "./pages/Products/Products";

layout => Template principale

navbar template tsy miova le outlet no miova refa miova page

<Navbar />
<Outlet />
<Footer />

const Layout = () => {

return (
<div className="app">
<Navbar />
<Outlet />
<Footer />
</div>
);
};

Le ‘const router’ ito le react-router-dom refa micreez anle lien idiranle misy anle page
Le path : le url
Le element : le page natao import tery ambony

Le element anaty childern no miditra ao anatinle layout

const router = createBrowserRouter([

{
path: "/",
element: <Layout />,
children: [
{
path: "/",
element: <Home />,
},
{
path: "/products/",
element: <Products />,
},
 {
path: "/product/",
element: <Product />,
},
{
path: "/about/",
element: <Abouts />,
},
{
path: "/contact/",
element: <Contact />,
},
],
},
]);

Function App() function principal anle react-router-dom

RouterProvider router ={router} le router mena io le router amle const ery ambony io

function App() {

return (
<div>
<RouterProvider router={router} />
</div>
);
}

export default App;

le export default App => tsy maintsy exportena le function principale ny nom anle function tsy
maintsy majuscule ny premier lettre
Index.js
const root = ReactDOM.createRoot(document.getElementById("root"));
io fonction io mapiditra anle element tao amle app.js ao anatiny element manana id root ao
am fichier index.html ao am dossier public

le root.render no miexecuter anle izy za tsy mahay anle provider sy persistGate reo

import React from "react";

import ReactDOM from "react-dom/client";

import App from "./App";

import { persistor, store } from "./redux/store";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";

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

root.render(
<React.StrictMode>
<Provider store={store}>
<PersistGate loading={"loading"} persistor={persistor}>
<App />
</PersistGate>
</Provider>
</React.StrictMode>
);

Navbar
import { Link } from "react-router-dom";
Link solony balise a

De to solony href de ny valeur anle to le tao anaty path tamle app.js

Ny image importena de le variable iny no atoa anaty accolade am src

De refa balise orphelin de tsy maintsy asina slash anidina anazy

import logo from "../../assets/images/header-logo.png"
<img src={logo} alt="logo" />

return (

// <div className="navbar">
<nav className="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div className="container">
<Link className="navbar-brand" to="/"><img src={logo} alt="logo" /></Link>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-
controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav ml-auto">
<li className="nav-item active">
<Link className="nav-link" to="/">Home
<span className="sr-only">(current)</span>
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="products">Products</Link>
</li>
 <li className="nav-item">
<Link className="nav-link" to="abouts">About Us</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="contact">Contact Us</Link>
</li>
</ul>
</div>
</div>
</nav>
);
}

export default Navbar;

page Home

le projet io tsy misy boucle fa tokony natao boucle le liste produit reo nataoko iany fa nisy
erreur de nataoko otranio aloh fa lany fotona ah

ref manao page de importena ze zavatra ilaina

mcree function anaranle page

de iny function iny no exportena aveo

nampiasaiko tamnio function fléché dahol le otranty const Home = () =>{}

de tsy maintsy misy return ao de tsy maintsy element ray ihany fa tsy mety ra miotra

element ray fa afaka manana child maro