Переключаться между входом в регистр и домом реагировать через троичного оператора

Question

Я пытаюсь переключаться между входом в систему, регистрацией и формой домашней страницы, используя троичный оператор. Но, когда я компилирую, появляется ошибка 'this.state.route === signIn' это зарезервированное ключевое слово. Я знаю, что такое зарезервированное ключевое слово, но я не могу понять, почему его присваивают вместо проверки условия, может ли кто-нибудь помочь исправить мой код?

<Navigation onRouteChange={this.onRouteChange}/> /*route change for sign out button*/
    { this.state.route === 'home'/*displays homescreen*/
        ?  <div>
            <Logo />
               <Rank />
                 <ImageLinkForm 
                 onInputChange={this.onInputChange} 
                 onSubmit={this.onSubmit}
                 />
                     <FaceRecognition box={this.state.box} 
                       imageUrl=  {this.state.imageUrl} />  
                      </div>
        :{ 
            this.state.route === 'signIn'/*shows error that this is a reserved keyword*/
            ? <SignIn onRouteChange={this.onRouteChange} />
            :<Register onRouteChange={this.onRouteChange} />
        }
   }

Answer 1

Кажется, после двоеточия есть дополнительная фигурная скобка. Также попробуйте разделить объекты, используя круглые скобки для удобства чтения. Попробуй это:

   <Navigation onRouteChange={this.onRouteChange} />
     {this.state.route === 'home' ? (
       <div>
         <Logo />
         <Rank />
         <ImageLinkForm 
           onInputChange={this.onInputChange} 
           onSubmit={this.onSubmit}
         />
         <FaceRecognition box={this.state.box} imageUrl={this.state.imageUrl} />  
       </div>
     ) : (
       this.state.route === 'signIn
         ? <SignIn onRouteChange={this.onRouteChange} />
         : <Register onRouteChange={this.onRouteChange} />
     )}