Как изменять props в react-router-dom v6?

Question

[TheSnegok]

Как сделать так, в react-router-dom v6, чтобы при нажатии на Link в тот шаблонный компонент что в Route передавались пропсы с компонента в котором Link?
Код:

<Routes>
     <Route path="/article" element={<ArcticleItem article="Hi!" />} />
</Routes>

<Link to="/article">
   <div className={s.itemArticleHeader}>
       <span>{articleHeader}</span>
   </div>
</Link>

Answer 1

[Alexandroppolus]

сериализовать нужные параметры в url, а внутри ArcticleItem выловить через useParams. Это самый здравый и каноничный вариант.

если что-то не сериализуемое, то надо передавать через стейт-манагер или ещё как-то.

Answer 2

[Антон Иванов]

Пропсы вверх по DOM дереву не меняются. Чтобы реализовать схожий функционал, вам нужно воспользоваться контекстом (useState, useContext). В верхнем компоненте объявляете стейт (state, setState), в нижние компоненты через Context.Provider передаете этот стейт (state, setState). В нижних компонентах используете useContext для получения стейта сверху. Теперь чтобы изменить стейт верхнего компонента у вас есть setState из контекста. Надеюсь понятно объяснил.

Comments

[TheSnegok]

Очень интересное решение, спасибо)