Reactjs - SPA Routing using a Navbar - reactjs

Question

Problem
I want to start off by saying that I am still new to reactjs and nodejs as a whole. I am working on a dynamic NavBar for a Single Page Application (SPA), but I am struggling with the routing. It took me some time, but I got the routing to work in general. For some reason, the "topics" and "about" pages will load properly (without reloading the whole page); however, the two reports (General Reports and International Reports) Nav options will reload the page with each click, defeating the purpose of a SPA. I looked through tutorial after tutorial just to get this far... I am hoping someone here can assist in pointing out what I am doing wrong.
The Code
This is the Navbar code:
import React from 'react';
import { render } from 'react-dom';
import { Navbar, Nav, NavItem, NavLink, MenuItem, NavDropdown } from 'react-bootstrap';
import { Router, Route, Switch } from 'react-router';
import { getUserGroup } from './Auth.jsx'; /*this is a mock file, the code only assigns a role that I can control by changing a "username"*/
var isDev = getUserGroup() === "dev" ? true : false;
var isAdmin = getUserGroup() === "admin" ? true : false;
var isDataAnalyst = getUserGroup() === "analyst" ? true : false;
/* setup this way intentionally to dynamically render the Navigation bar */
var renderUserVerify = !isDataAnalyst ? <MenuItem eventKey={1.1} href="/UserVerfication">USER VERIFICATION</MenuItem> : null;
var renderPkgLookup = !isDataAnalyst ? <MenuItem eventKey={1.2} href="/PkgInqueryn">PACKAGE INQUERY</MenuItem> : null;
var renderQuerySearch = !isDataAnalyst ? <NavDropdown eventKey={1} title="QUERY SEARCHES" id="query-nav-dropdown">
{renderUserVerify}
{renderPkgLookup}
</NavDropdown> : null;
var renderUpdateUser = isDev || isAdmin ? <NavItem eventKey={2} href="/UpdateUser">UPDATE USER</NavItem> : null;
var renderFPReports = isDev || isAdmin || isDataAnalyst ? <MenuItem eventKey={3.1} href="/reports/GenReports">GENERAL REPORTS</MenuItem> : null;
var renderIntlReports = isDev || isAdmin || isDataAnalyst ? <MenuItem eventKey={3.2} href="/reports/IntlReports">INTERNATIONAL REPORTS</MenuItem> : null;
var renderReports = isDev || isAdmin || isDataAnalyst ? <NavDropdown eventKey={3} title="REPORTS" id="reports-nav-dropdown">
{renderGenReports}
{renderIntlReports}
</NavDropdown> : null;
var renderUserPref = !isDataAnalyst ? <NavItem eventKey={4} href="/UserPref">USER PREFERENCE</NavItem> : null;
export default class Navigation extends React.Component {
handleSelect(eventKey) {
/*event.preventDefault();*/
this.state.href
}
render() {
return (
<div>
<Navbar inverse fluid collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
CPMS
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav onSelect={c => this.handleSelect(c)}>
{renderQuerySearch}
{renderUpdateUser
{renderReports}
{renderUserPref}
<NavItem eventKey={5} href="/Help">HELP</NavItem>
<NavItem eventKey={6} href="/logout">LOGOUT</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
}
This is the routing code:
import React from "react";
import { BrowserRouter as Router, Route, Link, HashRouter, NavLink } from "react-router-dom";
import GenReports from '../pages/GenReports';
import IntlReports from '../pages/IntlReports';
const BodyContent = () => (
<Router>
<div>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} /> /* dummy page for testing routing */
<Route path="/topics" component={Topics} /> /* dummy page for testing routing */
<Route path="/Reports/GenReports" component={GenReports} />
<Route path="/Reports/IntlReports" component={IntlReports} />
</div>
</Router>
);
const Home = () => (
<div>
<h2>This is the home page</h2>
</div>
);
const About = () => (
<div>
<h2>About</h2>
</div>
);
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<NavLink to={`${match.url}/rendering`}>Rendering with React</NavLink><br />
<NavLink to={`${match.url}/components`}>Components</NavLink><br />
<NavLink to={`${match.url}/props-v-state`}>Props v. State</NavLink><br />
<Route path={`${match.url}/:topicId`} component={Topic} />
<Route
exact
path={match.url}
render={() => <h3>Please select a topic.</h3>}
/>
</div>
);
const Topic = ({ match }) => (
<div>
<h3>{match.params.topicId}</h3>
</div>
);
export default BodyContent;
This is the code for the App.js
import React, { Component } from 'react';
import Navigation from './components/NavComponent';
import BodyContent from './components/RoutingComponent';
import 'react-bootstrap';
import logo from './logo.svg';
import './App.css';
export default class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<Navigation />
<BodyContent />
</div>
);
}
}
This is the GenReports page (the other reports page is setup the same way)
import React from 'react';
export default class IntlReports extends React.Component {
render() {
return (
<h1>You have reached the General Reports Page</h1>
);
}
}