Загрузите страницу входа без боковой панели, панели навигации и панели инструментов в React

Question

Как загрузить страницу входа без боковой панели, навигационной панели и приборной панели?

Answer 1

Извлеките <div id="wrapper">...</div> в отдельный компонент.

Добавить маршрут для вашей обертки без пути

<Route component={Wrapper} />

Обернуть все маршруты в <Switch> из react-router.

<Switch>
    <Route exact path="/register" component={Register} />
    <Route exact path="/login" component={Login} />
    <Route exact path="/forgot-password" component={ForgotPassword} />
    <Route component={Wrapper} />
</Switch>

Switch будет означать, что отображается только первый соответствующий маршрут.

Маршрут без пути будет совпадать с любым путем.

Answer 2

Хорошо, я предлагаю, чтобы у вас был отдельный контейнер для учетных данных, а компоненты для входа в систему и регистрации.

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

Answer 3

Вы можете установить флаг в вашем хранилище приставок, чтобы определить, должны ли эти компоненты отображаться.

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

Так что ваше состояние редукса может иметь что-то вроде:

showPageContent: false

В каждом из ваших компонентов попросите их подписаться, подключив их и передав mapStateToProps, например:

const mapStateToProps = (state) => ({
  shouldRender: state.showPageContent
})

export default connect(mapeStateToProps)(Sidebar)

Затем в рендере для каждого из ваших компонентов:

render() {
  this.state.shouldRender ? <Sidebar> : null
}

OR

render() {
  if (this.state.shouldRender) {
    <Sidebar>
  } 
}

Вам потребуется реализовать действие входа в систему, которое установит для флага showPageContent значение true после успешного входа в систему.

* * Пример 1 022: https://www.sohamkamani.com/blog/2017/03/31/react-redux-connect-explained/