Routing not working properly

I am trying to setup react router in my react application. The versions I am using are

"react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.9",
    "redux": "^3.7.2",

I am using reacr-router-redux for this appilication.

Application Flow: I have two pages in my application: Login Page and App Page. Landing page should be Login Page and when I click on Login button then it should take me to the App Page. There are three sections in App Page: Header, Sidebar and Content Section. Content section is dynamic and renders two different layouts depending on which link is clicked in sidebar. Only one component at a time can be rendered in content section.

Problem: I have defined routes. I get landed to LoginPage correctly. When I click to Login, I get navigated to app page also correctly. But when I click a link on sidebar, all the components (sidebar, header and content section) disappears.

My code

main index.js


    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import registerServiceWorker from './registerServiceWorker';
    import Root from './Container/Root'
    import {Provider} from 'react-redux'
    import {ConnectedRouter} from 'react-router-redux'
    import store, {history} from './store'

    ReactDOM.render(
        <Provider store={store}>
            <ConnectedRouter history={history}>
                <div>
                    <Root />
                </div>
            </ConnectedRouter>
        </Provider>,
        document.getElementById('root'));
    registerServiceWorker();

Root/index.js

  import  React, {Component, PropTypes } from 'react'
    import { Provider } from 'react-redux'
    import LoginPage from '../../Pages/LoginPage'
    import App from '../../Container/App/App'
    import { Route, Link } from 'react-router-dom'

    const styles = {
        container: {
            height: '100vh',
            width : '100vw',
            position: 'relative'
        }
    }

    class Root extends Component {
        render () {
            return (
                <div>
                    <div>
                        <main>
                            <Route exact path="/" component={LoginPage} />
                            <Route exact path="/app" component={App} />
                        </main>
                    </div>
                </div>

            )
        }
    }

    export default Root

App.js (here's where the problem is)

    import React, { Component } from 'react';
    import { Route, Link } from 'react-router-dom'
    import Sidebar from '../../Components/Sidebar'
    import TriviaPanel from '../../Components/TriviaPanel'
    import Header from '../../Components/Header'
    import ImagePanel from '../../Components/ImagePanel'
    import LoginPage from '../../Pages/LoginPage'

    class App extends Component {
      render() {
        return (
          <div>
              {/*<LoginPage/>   */}
            <Header/>
              <Sidebar/>
              <div>
                  <main>
                      <Route component={TriviaPanel} />
                      <Route exact path="/trivia" component={TriviaPanel} />
                      <Route exact path="/image" component={ImagePanel} />
                  </main>
              </div>
          </div>
        );
      }
    }

    export default App;

MenuPanel/index.js (This is the sidebar I change the content component from)

  import React, { Component } from 'react';
    import { push } from 'react-router-redux'
    import { bindActionCreators } from 'redux'
    import { connect } from 'react-redux'

    const styles = require('./sidebar.css');

    class MenuPanel extends Component {

       constructor(){
           super();

           this.state = {
               activePanel: "trivia"
           }
       }

        toImagePage(){
           this.setState({activePanel:"image"},()=>{
               this.props.toImagePage()
           })

        }

        toTriviaPage(){
            this.setState({activePanel:"trivia"},()=>{
                this.props.toTriviaPage()
            })
        }

        render() {
            return (
                <div>
                    <div className="navbar-side">
                        <div className="tessact-logo"></div>
                        <div className={`navbar-item ${this.state.activePanel == "trivia"? "active":""}`} onClick={() => this.toTriviaPage()}>
                            <a className="navbar-item-link"><span className="fa fa-comment"></span> TRIVIA</a>
                        </div>
                        <div className={`navbar-item ${this.state.activePanel == "image"? "active":""}`} onClick={() => this.toImagePage()}>
                            <a className="navbar-item-link"><span className="fa fa-picture-o"></span> IMAGES</a>
                            <div className="navbar-item-inside">
                                <a className="navbar-item-inside-link">PERSONSS</a>
                                <a className="navbar-item-inside-link">BRANDS</a>
                                <a className="navbar-item-inside-link">OBJECTS</a>
                            </div>
                        </div>
                        <div className="navbar-item">
                            <a className="navbar-item-link"><span className="fa fa-tags"></span> KEYWORDS</a>
                        </div>
                    </div>
                </div>

            );
        }
    }

    const mapDispatchToProps = dispatch => bindActionCreators({
        toTriviaPage: () => push('/trivia'),
        toImagePage: () => push('/image')

    }, dispatch)

    export default connect(
        null,
        mapDispatchToProps
    )(MenuPanel)

What is wrong in what I am doing? In previous versions of router it was pretty simple to define child routes and everything. I am new to this router v4.

remix-run / react-router

Routing not working properly #5906