Как заставить дочерний компонент маршрута отображаться на другом маршруте? - PullRequest
Новая
       63

Как заставить дочерний компонент маршрута отображаться на другом маршруте?

0 голосов
/ 12 апреля 2020

Чтение статьи Кена c dodds о государственном управлении в реакции: https://kentcdodds.com/blog/application-state-management-with-react

Я хочу сделать что-то подобное, но я хочу, например, чтобы NotificationsList отображался только на /notifications/list

Но все же я хочу, чтобы этот компонент был потомком NotificationsProvider для доступа к некоторым данным, я не хочу поднимать состояние до чего-то на том же уровне AuthenticationProvider 

function App() {
  return (
    <ThemeProvider>
      <AuthenticationProvider>
        <Router>
          <Home path="/" />
          <About path="/about" />
          <UserPage path="/:userId" />
          <UserSettings path="/settings" />
          <Notifications path="/notifications" />
        </Router>
      </AuthenticationProvider>
    </ThemeProvider>
  )
}
function Notifications() {
  return (
    <NotificationsProvider>
      <NotificationsTab />
      <NotificationsTypeList />
      <NotificationsList />
    </NotificationsProvider>
  )
}

Но теперь все компоненты уведомлений обрабатываются на /notifications

как мне это сделать, если я хочу получить NotificationsList визуализацию в пути /notifcations/list ?

Я пытался добавить пути к дочерним компонентам следующим образом: 

function Notifications() {
  return (
    <NotificationsProvider>
      <NotificationsTab path='/' />
      <NotificationsTypeList path='/list' />
      <NotificationsList path='/' />
    </NotificationsProvider>
  )
}

Но это не работает. Есть идеи?

...