Как структурировать контекст Api с несколькими состояниями для 2 защищенных маршрутов?

#reactjs #react-router

Вопрос:

У меня есть этот прототип маршрута, и я хочу добавить к нему 3 контекста

  1. приложение normal будет иметь отдельное состояние
  2. приложение extended будет иметь отдельное состояние
  3. общее состояние аутентификации для определенных маршрутов.

проблема в том , что я устаю выяснять, насколько безопасна и логична практика, я думаю, что каждое приложение не должно иметь доступа к состоянию, которое не принадлежит другому, поскольку состояние может включать данные из back in, и если состояние оборачивает все это, оно может предоставить доступ к данным, которые должны быть доступны только в том случае, если, например, пользователи зарегистрированы !! не могли бы вы, пожалуйста, изменить приведенный ниже код на случай, если я делаю это неправильно, и указать, какое место лучше всего подходит для состояния аутентификации.

 // No state    
    <Router>
    <Fragment>
    <Switch>
    <Route exact path='/Index' component={Index} />
    <Route exact path='/SignIn' component={SignIn} />
    <Route exact path='/SignUp' component={SignUp} />
    <Route exact path='/AppNormal' component={AppNormal} />
    <Route exact path='/AppExtended' component={AppExtended'} />
    </Switch>
    </Fragment>
    </Router>
    
// Version 1 
    <Router>
    <Fragment>
    <Switch>
    <Route exact path='/Index' component={Index} />
    <Route exact path='/SignIn' component={SignIn} />
    <Route exact path='/SignUp' component={SignUp} />
    <AppState>
    <Route exact path='/AppNormal' component={AppNormal} />
    <AppState>
    </AppExtendedState>
    <Route exact path='/AppExtended' component={AppExtended'} />
    </AppExtendedState>
    </Switch>
    </Fragment>
    </Router>
    
   // Version 2 
    <AppState>
    <AppExtendedState>
    <Router>
    <Fragment>
    <Switch>
    <Route exact path='/Index' component={Index} />
    <Route exact path='/SignIn' component={SignIn} />
    <Route exact path='/SignUp' component={SignUp} />
    <Route exact path='/AppNormal' component={AppNormal} />
    <Route exact path='/AppExtended' component={AppExtended'} />     
    </Switch>
    </Fragment>
    </Router>
    </AppExtendedState>
    <AppState>