برای اینکار می توانید از کتابخانه Route استفاده کنید.

ابتدا به فایل index.js بروید و BrowserRouter را ایمپورت کنید:

import { BrowserRouter } from 'react-router-dom';

سپس قطعه کد زیر را به این فایل اضافه کنید:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

در ادامه به فایل App.js بروید و کتابخانه های Route و Routes را ایمپورت کنید:

import { Route, Routes } from 'react-router-dom';

در تابع App قطعه کد زیر را قرار دهید:

function App() {
  return (



    <div className="App">


    <MainNavigation/>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/new-product" element={<NewProductPage />} />
      </Routes>

      <Footer/>

    </div>
  );
}

export default App;

• کد  <Route path="/" element={<Home />} />
<Route path="/new-product" element={<NewProductPage />} />
</Routes> دو لینک به آدرس های / و /new-product می سازد (کامپوننت <Home /> محتوای صفحه / و کامپوننت <NewProductPage /> محتوای صفحه /new-product را نشان می دهد).
• در کامپوننت <MainNavigation/> می توانید ظاهر منو را بسازید:

import { Link } from "react-router-dom";
import "./MainNavigation.css";
import 'react-slideshow-image/dist/styles.css'



function MainNavigation() {


    return (
        <header className="header">

            <nav>
                <ul>

                    <li>
                        <Link to="/new-product">محصول جدید</Link>
                    </li>
                    <li>
                        <Link to="/">همه محصولات</Link>
                    </li>
                </ul>
            </nav>
            <div className="logo">فروشگاه زیبا</div>
        </header>
    );



}

export default MainNavigation;

با استفاده از Link می توانید آیتم های منو را بسازید.