问题
我想首先说我仍然是新的反应器和nodejs。我正在为单页应用程序(SPA)创建动态NavBar,但我正在努力使用路由。我花了一些时间,但我得到了一般的工作路线。出于某种原因,“主题”和“关于”页面将正确加载(无需重新加载整个页面);但是,两个报告(常规报告和国际报告)导航选项将在每次点击时重新加载页面,从而无法实现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>
);
}
}