reactjs - Reactjs - 使用导航栏的 SPA 路由

Question

问题
我想首先说我对 reactjs 和 nodejs 作为一个整体还是新手。我正在为单页应用程序 (SPA) 开发动态导航栏，但我正在努力解决路由问题。我花了一些时间，但我让路由正常工作。出于某种原因，“主题”和“关于”页面将正确加载（无需重新加载整个页面）；但是，这两个报告（一般报告和国际报告）导航选项将在每次单击时重新加载页面，从而违背了 SPA 的目的。我一遍又一遍地阅读教程只是为了做到这一点......我希望这里的人可以帮助指出我做错了什么。

代码
这是导航栏代码：

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>
    );
  }
}

标签： reactjsreact-routerreact-navigation