Почему пропсы не передаются через router?

Question

[Олег Андрианов]

Добрый день. Только начинаю изучать 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. Подскажите, пожалуйста, должны ли передаваться пропсы по такой схеме, либо же в современном реакте это делается как-то по-другому?

Answer 1

[korobprog]

У Вас в коде пропсов не вижу)
const header = ( props ) => {
то что внутри
};