ネストされたルートに反応する

Question

私はreactjsを初めて使っています。私はホームページやランディングページのユーザーが異なるデザインを持っているウェブサイトを開発しようとしています。ユーザーがヘッダーの変更を記録し、サイドバーがあるとします。コンポーネントに署名したが、まだログインしていないために表示されるべきではない

私はルーティングヘッダやサイドバーを行う方法を知りたい

<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) 

を働いていないその内、私は私の署名のルートを置いてきた、いくつかのページがあり、ユーザーができますサインなしでのアクセス

私が書いた上記のコードはルーティングではありません。

「

Answer 1

ルータは、あなたが簡単にルーティング

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

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

、今あなたが（flowRouter.pathとしてこれを使用することができますためReactRouter（flowRouter kadira）パッケージを使用することができます古い一つの方法である正しい方向に私を導いてください。 Routes.Task.List '）