React-router-dom: Как обновить реквизиты на компоненте оболочки?

Question

У меня есть такой компонент приложения:

const App = (props) => (
  <BrowserRouter>
    <PageTheme {...some props I'd like to change on route change}>
      <Switch>
        <Route exact path="/example">
          <Example {...props} />
        </Route>
        <Route exact path="/example/detail/:exampleId">
          <ExampleDetail {...props} />
        </Route>
      </Switch>
    </PageTheme>
  </BrowserRouter>
);

Компонент PageTheme, охватывающий Switch, имеет некоторый пользовательский интерфейс навигации, а также некоторые параметры цвета фона страницы и т. Д. c. способ предоставить PageTheme некоторые конкретные c реквизиты для каждого маршрута? Или лучше всего поместить новый компонент PageTheme внутри каждого Route? Спасибо!

Answer 1

Что вы можете сделать, это использовать withRouter и обернуть PageTheme этим:

export default withRouter(PageTheme);

Или использовать useLocation hook, если PageTheme является функциональным компонентом. Чем у вас будет доступ к location и ваши волхвы c на основе текущего маршрута / URL.