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)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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