Добрый день. Только начинаю изучать react и попал в неприятную ситуацию.
Задача: передавать пропсы по иерархии компонентов сверху вниз. Между соседними компонентами все передается, но т.к. курс немного устаревший, а реакт быстро меняется, я не могу сделать то, что делается в курсе.
Я выношу объект в index.js и пытаюсь передать его через пропсы.
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
в app.js я делаю роуты:
<>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home/>} />
<Route path="/cases" element={<Cases />} />
<Route path="/works-all" element={<WorksAll />} />
<Route path="*" element={<NotFoundPage />} />
</Route>
</Routes>
</>
в layout помещаю компонент для вывода - outlet:
<div className={app.container}>
<div className={app.page}>
<div className={app.info}>
<Card />
<About />
</div>
<div className={app.content}>
<Greeting />
<Outlet />
</div>
</div>
</div>
и в компонент cases должны попасть пропсы через роутинг в app.js:
<div className={`${app.block} ${cases.cases}`}>
<div className={app.title}>
<h2 className={app.header}>
Cases
</h2>
<NavLink className={ `${app.more} ${cases.more}` } to="/cases">
View all cases
</NavLink>
</div>
<ul className={cases.list}>
<Case />
</ul>
</div>
я полагаю, что у меня принципиальная ошибка, чего то я не знаю или это делается другим путем, потому что данные не проходят только через роутинг в app.js, в других частях приложения все работает ок. версия роутера 6. Подскажите, пожалуйста, должны ли передаваться пропсы по такой схеме, либо же в современном реакте это делается как-то по-другому?