React nested Routes implementation - reactjs

Question

I am new to reactjs. i am trying to develop website who's home page or landing page has different design then signin user. after user logs in header changes and there is a sidebar. I have placed my signed routes inside signed in component but still its not working
<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)
I want to know how to do routing header and sidebar shouldn't be shown for non logged in user, there are few pages user can access without sign in
Above code which i have written is not routing.
Please guide me in right direction

Answer 1

router is old one method you can use ReactRouter (flowRouter kadira) package for easy routing
group.route('/', {
name: 'Routes.Task.List',
action () {
let props = {
content: (<Containers.List />),
title: 'title xyz',
pageTitle: 'title xyz',
};
mount(Wrapper, { props });
},
});
and now you can use this as flowRouter.path('Routes.Task.List')