Content disappears after routing from login page? React Router Dom + Electron

Summary

I'm building an electron app with react. Currently I have 2 main routes - a login page, and a dashboard. The dashboard has 3 sub routes controlled by a sidebar. The 3 sub routes - home, install, and settings - are displayed in a main content area alongside the sidebar. This approach works fine by itself. The issue arises when I string in the login page. I've been successful in routing from the login to the main page area, but the sub routes fail to render when I do so.

The problem

When I route from login, to the dashboard, my layout appears fine. Once i click on an option in the sidebar, the DOM goes blank. I've moving around my routes and divs, but haven't had much luck this way. Here is the code for my setup. Sometimes, I can even see a flash of the main content that should be there before it blanks.

Another thing I've tried is changing my entry point router to include a <Switch> above the 2 routes. With that setup, I could get from login, to dashboard, but clicking a sidebar option would send me back to login.

index.js - entry point

const routing = (
  <HashRouter>
      <Route exact path="" component={Auth}/>
      <Route exact path="/dashboard" component={Layout} />
  </HashRouter>
)

ReactDOM.render(routing, document.getElementById('root'));

Layout.js - the dashbaord.

    render() {
        return (
        <HashRouter>
            <div>
                <Installer onRef={ref => (this.child = ref)}  />
                <div className={'sideBar'}>
                    <div className={'navSelect'}>
                        <NavLink to={'/home'}  activeClassName="navOptionActive">
                            <div className={'navOption'} >
                                <HomeIcon 
                                style={{fontSize: 75, textAlign: 'center', alignSelf: 'center', 
                                color: 'white', marginTop: 10, marginBottom: 0}}/>
                                <h1>Home</h1>
                            </div>
                        </NavLink>

                         <NavLink to={'/test'}  activeClassName="navOptionActive">
                            <div className={'navOption'}>
                                <Brightness3Icon 
                                style={{fontSize: 75, textAlign: 'center', alignSelf: 'center', 
                                color: 'white', marginTop: 10, marginBottom: 0}}/>
                                <h1>Nightly</h1>
                            </div>
                        </NavLink>
                        <div className={'bottom'}>
                            <NavLink to={'/nothing'} exact activeClassName="navOptionActive">
                                <div className={'navOption'} id={'settings'}>
                                    <SettingsIcon 
                                    style={{fontSize: 75, textAlign: 'center', alignSelf: 'center', 
                                    color: 'white', marginTop: 10, marginBottom: 0}}/>
                                    <h1>Settings</h1>
                                </div>
                            </NavLink>
                        </div>
                    </div>
                </div>

                {/*Main content area. This is where the content from the sidebar options will be displayed. */}
                <div className={'mainContent'} >
                    <Route path="/home">
                        <App />
                    </Route>
                    <Route path="/test">
                        <TestPage  install={this.install} />
                    </Route>
                </div>
            </div>
        </HashRouter>

Also note, I don't have a settings page linked up yet which is why one of the navlinks goes to /nothing.