Подскажите, пожалуйста, как обернуть в роут все составляющие Нome Так как без них выводится только шапка Никак не получается это решить
index.js
import React from 'react';
import { BrowserRouter as Router} from 'react-router-dom';
import ReactDOM from 'react-dom/client';
import './index.scss';
import App from './App';
import 'macro-css';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>
);
App.js
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import axios from 'axios';
import Header from './components/Header';
import Drawer from './components/Drawer';
import AppContext from './context';
import Home from './pages/Home';
import Favorites from './pages/Favorites';
import Orders from './pages/Orders';
return (
<AppContext.Provider
value={{
items,
cartItems,
favorites,
isItemAdded,
onAddToFavorite,
onAddToCart,
setCartOpened,
setCartItems,
}}>
<div className="wrapper clear">
<Drawer
items={cartItems}
onClose={() => setCartOpened(false)}
onRemove={onRemoveItem}
opened={cartOpened}
/>
<Header onClickCart={() => setCartOpened(true)} />
<Routes>
<Route path="/" element={Home}
items={items}
cartItems={cartItems}
searchValue={searchValue}
setSearchValue={setSearchValue}
onChangeSearchInput={onChangeSearchInput}
onAddToFavorite={onAddToFavorite}
onAddToCart={onAddToCart}
isLoading={isLoading}
/>
<Route path="/Favorites" element ={Favorites}/>
<Route path="/Orders" element ={Orders}/>
</Routes>
</div>
</AppContext.Provider>
);
}