0

Подскажите, пожалуйста, как обернуть в роут все составляющие Н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>
);
}

2 ответа 2

0

Для передачи параметров в компонент необходимо их прописать в явном виде. т.е. в element можно передается JSX элемент в явном виде

<Route path="/" element={<Home
          items={items}
          cartItems={cartItems}
          searchValue={searchValue}
          setSearchValue={setSearchValue}
          onChangeSearchInput={onChangeSearchInput}
          onAddToFavorite={onAddToFavorite}
          onAddToCart={onAddToCart}
          isLoading={isLoading}
          />}
      />
0

В компонент Home и прокидовать все эти параметры не обязательно, у вас же контекст есть, из него и доставайте все что там лежит.

Все что внутри провайдера можно получить из хука useContext(AppContext)

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.