Как работает <Switch>, когда он встречает в себе React Components? - PullRequest
Новая
       62

Как работает <Switch>, когда он встречает в себе React Components?

0 голосов
/ 31 мая 2018

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

App.js 

        <Switch>
          <Redirect exact path="/" to="/dashboard"/>
          <Route path="/login" component={GuestBoard} /> 
          <EnsureSignedIn>
            <Switch>
              <Route path="/dashboard/" component={Dashboard}/>
              <Route path="/welcome/" component={Welcome}/>
           </Switch>
          </EnsureSignedIn>
       </Switch>

В основном <EnsureSignedIn> проверяет, вошел ли пользователь в систему,он отображает всех детей.

Мой вопрос таков: как <Switch> отображает <EnsureSignedIn> без пути. А также что именно происходит (каков потокрендеринг компонентов) если я продолжу писать компоненты React внутри <Switch>?

Скажем что-то вроде этого 

       <Switch>
          <Redirect exact path="/" to="/dashboard"/>
          <Route path="/login" component={GuestBoard} /> 
          <Component1 />
          <Component2 /> 
          <Component3 />
       </Switch>

EnsureSignedIn: 

componentDidMount() {
    if (!this.props.user) {
      this.props.history.push('/login?next=' + this.props.currentURL);
    }
render() {
        return (this.props.user ? this.props.children : null);
      }

У нас естьИспользуется избыточность, так что пользователь является реквизитом от редуктора.

1 Ответ

0 голосов
/ 31 мая 2018

Переключатель работает здесь, как и предполагалось, хотя в документации рекомендуется использовать только компонент Route или Redirect в качестве прямого дочернего элемента.Однако задокументировано, что Switch будет отображать одного дочернего элемента - первого дочернего элемента, который соответствует текущему маршруту.В нем также указывается, что компонент <Route без пути разрешен как универсальное средство, что и происходит здесь.

Чтобы упростить, Switch будет перебирать всех своих дочерних элементов, один за другим, изсверху вниз и выберите первый компонент, где путь соответствует текущему маршруту или для компонента не указан путь (компонент catch-all).Вы можете увидеть, как это работает здесь: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Switch.js#L47 обратите внимание, что он ищет реквизиты компонента Route, но нет кода, специально требующего, чтобы компонент был Route.

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

Если бы вы реструктурировали свой код следующим образом: 

 <Switch>
      <span>Hello!!</span>
      <Redirect exact path="/" to="/dashboard"/>
      <Route path="/login" component={GuestBoard} /> 
      <EnsureSignedIn>
        <Switch>
          <Route path="/dashboard/" component={Dashboard}/>
          <Route path="/welcome/" component={Welcome}/>
       </Switch>
      </EnsureSignedIn>
   </Switch>

Это также было бы полностью допустимо, но единственное, что когда-либо отображалось, это "Hello !!"потому что это первый соответствующий компонент.

...