Rendering sidebar along with other components using react router 4.2

Question

Im having trouble rendering some nested routes to keep a component rendered across all my application.

This is my router component:

const configRouter = (history: Object) => {
  return () =>
    <ConnectedRouter history={ history }>
      <div>
        <Route exact path="/" component={ LoginView }/>
        <Route exact path="/dashboard" component={ UserIsAuthenticated(DashboardView) }/>
        <Route path="/map" component={ Map }/>
        <Route path="/sandbox" component={ SandboxView }/>
      </div>
    </ConnectedRouter>
};

Inside DashboardView there is a sidebar which I want to keep at all times.

// @flow
import React from 'react';
import { connect } from 'react-redux';
import { actions as jwtActions } from 'nozzmo-redux-jwt';
import styles from './dashboard.css'
import { Route } from 'react-router';
import MyView from '../../../components/MyView';
import {
  MdMap,
  MdEvent,
  MdDirections,
  MdGroup,
  MdSettings,
  MdAssignment
} from 'react-icons/lib/md';

import Sidebar, {
  SidebarLink,
  SidebarGroup,
  SidebarAvatar
} from '../../Sidebar';


type DashboardViewPropTypes = {
  children: Object
};


class DashboardView extends React.Component<DashboardViewPropTypes> {
  render() {
    // const { match } = this.props;
    return (
      <div className={ styles.dashboard }>
          <Sidebar>
              <SidebarGroup position='top'>
                  <SidebarAvatar
                      pictureURL='https://i0.wp.com/www.sardiniauniqueproperties.com/wp-content/uploads/2015/10/square-profile-pic.jpg'
                      to='/courses'
                      badgeCount={ 10 }
                  />
                  <SidebarLink
                      Icon={ MdMap }
                      to='/route'
                      badgeCount={ 0 }
                  />
                  <SidebarLink
                      Icon={ MdDirections }
                      to='/courses'
                      badgeCount={ 0 }
                  />
                  <SidebarLink
                      Icon={ MdEvent }
                      to='/courses'
                      badgeCount={ 2 }
                  />
                  <SidebarLink
                      Icon={ MdGroup }
                      to='/courses'
                  />
                  <SidebarLink
                      Icon={ MdAssignment }
                      to='/courses'
                      badgeCount={ 0 }
                  />
              </SidebarGroup>
              <SidebarGroup position='bottom'>
                  <LogoutLink />
                  <SidebarLink
                      Icon={ MdSettings }
                      to='/courses'
                      badgeCount={ 0 }
                  />
              </SidebarGroup>
          </Sidebar>

          <Route path={'/myview'} component={ MyView } />

      </div>

    );
  }
}

export default DashboardView;

const LogoutLink = connect(
    () => ({}),
  dispatch => ({
    onClick() {
      dispatch(jwtActions.logout());
    }
  })
)(({ onClick }) => <button onClick={ onClick }>{ 'Logout' }</button>);

I expect that when I enter /myview on the browser's url, the Sidebar component keeps rendering on screen and I additionally get the MyView component rendered on screen too.

However when I enter /myview I only get a blank screen, not even the sidebar gets rendered.

Can anyone tell me what I'm doing wrong?

Answer 1

You have

 <Route path={'/myview'} component={ MyView } />

If you want to render MyView component it should be

<Route path={'/dashboard/myview'} component={ MyView } />

Try that and let me know how it goes.