Reagiere verschachtelte Routes-Implementierung

Question

Ich bin neu in reactjs. Ich versuche, Website zu entwickeln, die Homepage oder Zielseite hat ein anderes Design, dann Benutzer anmelden. nachdem der Benutzer Headeränderungen protokolliert hat und eine Seitenleiste vorhanden ist. Ich habe meine unterzeichnet Routen platziert innen in der Komponente unterzeichnet, aber noch seine Arbeit nicht

<Switch> 
<Route exact path="/" component={HomePage} /> 
<Route path="/Resident" component={customer} /> 
<Route path="/search" component={search} /> 
<Route component={EmptyPage} /> 
</Switch> 

    class customer extends Component { 

     constructor() { 
      super() 
      this.setLayout = this.setLayout.bind(this) 
      // Listen for changes to the current location. 
      history.listen((location, action) => { 
       // location is an object like window.location 
       //console.log('history', location.pathname, this.setLayout(location.pathname)) 
       this.setLayout(location.pathname) 
      }) 
     } 

     componentWillMount() { 
      this.setLayout(this.props.pathname) 
     } 

     setLayout(url) { 
      const emptyView1 = [ 
       '/pages/error-page', 
       '/pages/create-account', 
       '/pages/login', 
       '/pages/under-maintenance', 
      ]; 

      let isEmptyView = indexOf(emptyView1, url) !== -1 ? true : false 
      let currentLayout = this.props.config.layout 
      if(isEmptyView && currentLayout !== 'empty-view-1') { 
       this.props.setConfig('layout', 'empty-view-1') 
      } else if(!isEmptyView && currentLayout !== 'default-sidebar-1') { 
       this.props.setConfig('layout', 'default-sidebar-1') 
      } 
     } 

     render() { 
      let {layout, background, navbar, logo, leftSidebar, topNavigation, collapsed} = this.props.config 
      // let {pathname} = this.props 
      let isEmptyView = layout === 'empty-view-1' ? true : false 
      return (
       <ConnectedRouter history={history}> 
        <div 
         data-layout={layout} 
         data-background={background} 
         data-navbar={navbar} 
         data-logo={logo} 
         data-left-sidebar={leftSidebar} 
         data-top-navigation={topNavigation} 
         data-collapsed={collapsed} 
        > 
         <Shortcuts /> 
         <Backdrops /> 
         {!isEmptyView && 
         <RightSidebar1 /> 
         } 
         {!isEmptyView && 
         <Navbar1 /> 
         } 
         <div className="container-fluid"> 
          <div className="row"> 
           {!isEmptyView && 
           <LeftSidebar1 /> 
           } 
           <div className="col main"> 
            <Switch> 
             <Route path="/dashboard" component={Dashboard} /> 
             <Route path="/policies/index" component={Policies}/> 
             <Route path="/pages/create-account" component={CreateAccount} /> 
             <Route path="/pages/empty-page" component={EmptyPage} /> 
             <Route path="/pages/under-maintenance" component={UnderMaintenance} /> 
             <Route path="/pages/error-page" component={ErrorPage} /> 
             <Route path="/pages/user-profile" component={UserProfile} /> 
             <Route path="/on-notice" component={OnNotice} /> 
             <Route path="/profile" component={UserProfile} /> 
             <Route path="/kyc-documents" component={KYCDocuments} /> 
             <Route path="/booking" component={Booking} /> 
             <Route path="/bookings" component={Bookings} /> 

             <Route path="/pay-amount" component={Payment} /> 
             <Route path="/security-deposit" component={Deposit} /> 
             <Route path="/transactions" component={Transactions} /> 
             <Route path="/notice-board" component={NoticeBoard} /> 
             <Route path="/deals" component={Deals} /> 

             <Route path="/checkin" component={Checkin} /> 
             <Route path='/subscriptions' component={MySubscriptions} /> 
             <Route path='/view-ticket' component={ViewTicket} /> 
             <Route path="/new-ticket" component={NewTicket} /> 
             <Route component={EmptyPage} /> 
            </Switch> 
           </div> 
          </div> 
         </div> 
        </div> 
       </ConnectedRouter> 
      ) 
     } 
    } 

    const mapStateToProps = (state, ownProps) => { 
     return { 
      pathname: state.router.location && state.router.location.pathname ? state.router.location.pathname : window.location.pathname, 
      config: state.config, 
      tickets : state.ticket 
     } 
    } 
    const mapDispatchToProps = dispatch => { 
     return { 
      setConfig: (key, value) => dispatch(setConfig(key, value)) 
     } 
    } 
    export default connect(mapStateToProps, mapDispatchToProps)(customer) 

Ich möchte wissen, wie Routing-Header und Seitenleiste tun sollten nicht für angemeldete Benutzer nicht angezeigt werden, gibt es nur wenige Seiten Benutzer kann Zugang ohne Anmeldung

Über dem Code, den ich geschrieben habe, ist das Routing nicht.

Bitte leite mich in die richtige Richtung

Answer 1

Router alte Methode ist, können Sie ReactRouter (flowRouter kadira) Paket für die einfache Routing

group.route('/', { 
     name: 'Routes.Task.List', 
     action() { 
      let props = { 
       content: (<Containers.List />), 
       title: 'title xyz', 
       pageTitle: 'title xyz', 
      }; 

      mount(Wrapper, { props }); 
     }, 
    }); 

und jetzt können Sie diese als flowRouter.path verwenden verwenden (‘ Routes.Task.List ')