Использование <ContextProvider>внутри <Switch> - PullRequest
Новая
       16

Использование <ContextProvider>внутри <Switch>

1 голос
/ 16 июня 2020

1 - Я хочу обернуть компонент «Модель» в «ModelStateProvider», как показано ниже, но это не работает. Я искал в Google и не нашел практического решения. Я хотел бы знать, есть ли способ заставить его работать.

2- Интересно, было бы практично и эффективно обернуть все приложение «ModelStateProvider», например «AuthStateProvider», но имейте это в виду Я буду использовать «ModelStateProvider» только с компонентом «Модель».

Не могли бы вы помочь мне разобраться, пожалуйста?

Спасибо:] 

const App = () => {
  return (
    <AuthStateProvider>
      <Router>
        <Navbar />
        <main className='container'>
          <Route exact path='/' component={Homepage} />
          <Switch>
            <Route exact path='/signin' component={Signin} />
            <Route exact path='/signup' component={Signup} />
            <ModelStateProvider>
              <Route exact path='/model/:link' component={Model} />
            </ModelStateProvider>
            <Route exact path='/models' component={Models} />
            <Route exact path='/profiles' component={Profiles} />
            <PrivateRoute exact path='/account' component={Account} />
            <PrivateRoute exact path='/publish' component={Publish} />
          </Switch>
        </main>
      </Router>
    </AuthStateProvider>
  )
}

РЕДАКТИРОВАТЬ: Исправлено отображение внутри маршрута. Поскольку мне была нужна тропа, я прошел ее как опору. Вы можете увидеть решение ниже. 

<Route
  exact
  path='/model/:link'
  render={(path) => (
    <ModelStateProvider>
      <Model path={path} />
    </ModelStateProvider>
  )}
/>

1 Ответ

1 голос
/ 16 июня 2020

Вместо передачи пропуска component в маршрут вы можете использовать неявное свойство children, которое в документации по Switch показано в примере . 

<Switch>
  <Route … />
  <Route exact path='/model/:link'>
    <ModelStateProvider>
      <Model />
    </ModelStateProvider>
  </Route>
  …
</Switch>

Если это не удовлетворяет вашим ограничениям для маршрутизации или сопоставления маршрутов, или если вы по какой-то причине не можете передать все свойства маршрутизатора непосредственным потомкам поставщика, вы можете создать составной компонент, который обертывает поставщика и модель: 

const ModelWithProvider = (props) => (
  <ModelStateProvider>
    <Model {...props} />
  </ModelStateProvider>
);

// …
<Switch>
  <Route … />
  <Route exact path='/model/:link' component={ModelWithProvider} />
  …
</Switch>

И если этот не работает или по какой-то причине невозможно обернуть досрочно, вы можете просто обернуть Switch (или Router, или любого другого предка) с ModelStateProvider. Вы упомянули об этом в своем вопросе, но не объяснили, почему и как это не работает для вас, кроме «эффективности». Есть ли что-нибудь явно неэффективное в вашем приложении, когда вы это пробовали?

...