Как правильно передать пропсы в route который находиться выше?

Question

[Ольга Миронова]

Подскажите пожалуйста, как можно передать пропсы в компоненту выше?
Дерево такое
компонента App, в ней рендерится ещё 2 компоненты

const App = () => {
  return (
    <div>
      <Switch>
        <Route exact path='/' render={() => <Main />} />
        <Route path='/list' render={() => <List  />} />
      </Switch>
    </div>
  );
}

дело в том, что в компоненте Main рендерится еще компонента <Music />, так вот эта компонента Music получает пропсы из Main и рендерит еще компоненту <Track /> которая обернута в

<Link to='/list'>
  <Track ...разные пропсы и отрисовка/>
<Link />

то есть смысл, при нажатии на трек, мне нужно открыть компоненту List!!!, но она никак же не получает пропсы, потому что нужно их как-то передать в компоненту на самый верх(((, я всяко пробовала, но не получается и запуталась(((
ну плииииз подскажите пожалуйста...

Answer 1

[Антон Спирин]

Варианты:
1. Подъем состояния.
2. Использование state management библиотеки, например redux.

Comments

[Ольга Миронова]

ой а как-нибудь без redux)))

[Антон Спирин]

Ольга Миронова, первая ссылка, храните состояние в App и передавайте его и колбеки на изменение в дочерние компоненты.
Тут можно использовать контекст. Пример.

[Ольга Миронова]

Антон Спирин, а если уже всё состояние хранится в Main, есть ли какой-то выход?

[Mikhail Osher]

Ольга Миронова, context придуман для этих целей

[Антон Спирин]

Ольга Миронова, да, переносить общее состояние вверх.

[Ольга Миронова]

Спасибо большое!!!