Reactjs - SPA-маршрутизация с использованием Navbar

Question

Задача Я хочу начать с того, что я все еще новичок в реагировании и узлах в целом.Я работаю над динамическим NavBar для одностраничного приложения (SPA), но я борюсь с маршрутизацией.Это заняло у меня некоторое время, но я получил маршрут на работу в целом.По какой-то причине страницы "themes" и "about" будут загружаться правильно (без перезагрузки всей страницы);однако в двух отчетах (Общие отчеты и Международные отчеты) параметры Nav будут перезагружать страницу при каждом щелчке, что противоречит цели SPA.Я просмотрел урок за уроком только для того, чтобы продвинуться дальше ... Я надеюсь, что кто-то здесь может помочь указать на то, что я делаю неправильно.

Код Это код Navbar:

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>
              <a href="/"> CPMS </a>
            </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>
    );
  }
}

Это код маршрутизации:

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;

Это код для 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>
    );
  }
}

Это страница GenReports (страница других отчетов настраивается аналогично)

import React from 'react';

export default class IntlReports extends React.Component {
  render() {
    return (
     <h1>You have reached the General Reports Page</h1>
    );
  }
}