html - ReactJs-SPA导航栏

问题
因此，我正在使用ReactJs创建一个单页应用程序，但我的导航栏有问题。如果不重新加载网页而不是更新呈现的组件，我似乎无法使导航按钮正确链接到页面。
当我尝试以下操作时：
<NavItem eventKey={1} href="/someLink">someLink</NavItem>
我发现单击相应的Nav按钮将用正确的预期内容重新加载页面，而不是只更新呈现的组件。
当我尝试以下操作时：
<NavItem eventKey={1}><NavLink to="/someLink">someLink</NavLink></NavItem>
我发现，如果直接单击链接文本本身，链接将加载页面，但将更新呈现的组件而不重新加载整个页面。如果我将NavLink切换为Link，也会看到相同的结果。
当我尝试以下操作时：
<NavItem eventKey={1} href="/someLink"><NavLink to="/someLink">someLink</NavLink></NavItem>
我发现文本链接将更新呈现的组件，但如果我单击文本周围的任何空格，但仍在同一个按钮内，它将带我到正确的页面，但将重新加载整个页面。像上面一样，我也看到了从NavLink切换到Link的相同结果
如果有帮助，这就是我正在使用的代码：

import React from 'react';
import { Navbar, Nav, NavItem, MenuItem, NavDropdown } from 'react-bootstrap';
import { BrowserRouter as Router, Route, Link, NavLink } from "react-router-dom";
import { getUserGroup } from './Auth.jsx';

/* All page imports */
import Home from '../pages/Home';
import PackageQuery from '../pages/PkgQuery';
import CustQuery from '../pages/CustomerQuery';
import CustUpdate from '../pages/CustUpdate';
import PackageReports from '../pages/PkgReports';
import IntlReports from '../pages/IntlReports';
import SalesReports from '../pages/SalesReports';

const isDev = getUserGroup() === "dev" ? true : false;
const isAdmin = getUserGroup() === "admin" ? true : false;
const isDataAnalyst = getUserGroup() === "analyst" ? true : false;

/*
*  Below is an example of conditional rendering
*  Using the above variables as shorthand, each "render" performs a check against the user role
*  to determine if the navigation bar should render that piece of the navigation component.
*  The final navbar pushed to the component that utilizes the Navigation componenet will never
*  know the existance of the non-rendered pieces, helping to prevent potential security issues
*/
export default class Navigation extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Navbar fluid collapseOnSelect>
            <Navbar.Header>
              <Navbar.Brand>
                <NavLink to="/"> HOME </NavLink>
              </Navbar.Brand>
            </Navbar.Header>
              <Nav bsStyle="tabs" >
                <NavDropdown eventKey={1} title="QUERIES" id="query-nav-dropdown">
                  {!isDataAnalyst ? <MenuItem eventKey={1.1}><NavLink to="/PkgQuery">PACKAGE QUERY</NavLink></MenuItem> : null}
                  <MenuItem eventKey={1.2}><NavLink to="/CustQuery">CUSTOMER QUERY</NavLink></MenuItem>
                </NavDropdown>
                {isDev || isAdmin ? <NavItem eventKey={2} href="/CustUpdate"><NavLink to="/CustUpdate">UPDATE CUSTOMER DATA</NavLink></NavItem> : null}
                {isDev || isAdmin || isDataAnalyst ? <NavDropdown eventKey={5} title="REPORTS" id="reports-nav-dropdown">
                  {isDev || isAdmin || isDataAnalyst ? <MenuItem eventKey={5.1}><NavLink to="/PkgReports">PACKAGE REPORTS</NavLink></MenuItem> : null}
                  {isDev || isAdmin || isDataAnalyst ? <MenuItem eventKey={5.2}><NavLink to="/IntlReports">INTERNATIONAL REPORTS</NavLink></MenuItem> : null}
                  {isDev || isAdmin || isDataAnalyst ? <MenuItem eventKey={5.3}><NavLink to="/SalesReports">SALES REPORTS</NavLink></MenuItem> : null}
                </NavDropdown> : null}
                <NavItem eventKey={7} to="/Help">HELP</NavItem>
                <NavItem eventKey={8}><NavLink to="/logout">LOGOUT</NavLink></NavItem>
              </Nav>
          </Navbar>

          <Route exact path="/" component={Home} />
          <Route path="/PkgQuery" component={PkgQuery} />
          <Route path="/CustQuery" component={CustQuery} />
          <Route path="/CustUpdate" component={CustUpdate} />
          <Route path="/PkgReports" component={PkgReports} />
          <Route path="/IntlReports" component={IntlReports} />
          <Route path="/SalesReports" component={SalesReports} />
        </div>
      </Router>
    );
  }
}

问题
是否有人知道利用Nav、NavLink、Link和/或NavItem来确保只更新目标组件而不是重新加载整个页面的正确方法？
回答
这个答案是在@zaunermax的帮助下得到的
基本答案是获取react-router-bootstrap并利用其LinkContainer组件修改代码。
要修改代码，只需删除Link和/或NavLink组件，并将NavItem和MenuItem标记包装在LinkContainer标记中，如下所示：

import React from 'react';
import { Navbar, Nav, NavItem, MenuItem, NavDropdown } from 'react-bootstrap';
import { BrowserRouter as Router, Route, Link, NavLink } from "react-router-dom";
import { LinkContainer } from 'react-router-bootstrap';
import { getUserGroup } from './Auth.jsx';

/* All page imports */
import Home from '../pages/Home';
import PackageQuery from '../pages/PkgQuery';
import CustQuery from '../pages/CustomerQuery';
import CustUpdate from '../pages/CustUpdate';
import PackageReports from '../pages/PkgReports';
import IntlReports from '../pages/IntlReports';
import SalesReports from '../pages/SalesReports';

const isDev = getUserGroup() === "dev" ? true : false;
const isAdmin = getUserGroup() === "admin" ? true : false;
const isDataAnalyst = getUserGroup() === "analyst" ? true : false;

/*
*  Below is an example of conditional rendering
*  Using the above variables as shorthand, each "render" performs a check against the user role
*  to determine if the navigation bar should render that piece of the navigation component.
*  The final navbar pushed to the component that utilizes the Navigation componenet will never
*  know the existance of the non-rendered pieces, helping to prevent potential security issues
*/
export default class Navigation extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Navbar fluid collapseOnSelect>
            <Navbar.Header>
              <Navbar.Brand>
                <NavLink to="/"> HOME </NavLink>
              </Navbar.Brand>
            </Navbar.Header>
              <Nav bsStyle="tabs" >
                <NavDropdown eventKey={1} title="QUERIES" id="query-nav-dropdown">
                  {!isDataAnalyst ? <LinkContainer to="/PkgQuery"><MenuItem eventKey={1.1}>PACKAGE QUERY</MenuItem></LinkContainer> : null}
                  <LinkContainer to="/CustQuery"><MenuItem eventKey={1.2}>CUSTOMER QUERY</MenuItem></LinkContainer>
                </NavDropdown>
                {isDev || isAdmin ? <LinkContainer to="/CustQuery"><NavItem eventKey={2} href="/CustUpdate"><NavLink to="/CustUpdate">UPDATE CUSTOMER DATA</NavLink></NavItem> : null}
                {isDev || isAdmin || isDataAnalyst ? <NavDropdown eventKey={5} title="REPORTS" id="reports-nav-dropdown">
                  {isDev || isAdmin || isDataAnalyst ? <LinkContainer to="/PkgReports"><MenuItem eventKey={5.1}>PACKAGE REPORTS</MenuItem></LinkContainer> : null}
                  {isDev || isAdmin || isDataAnalyst ? <LinkContainer to="/IntlReports"><MenuItem eventKey={5.2}>INTERNATIONAL REPORTS</MenuItem></LinkContainer> : null}
                  {isDev || isAdmin || isDataAnalyst ? <LinkContainer to="/SalesReports"><MenuItem eventKey={5.3}>SALES REPORTS</MenuItem></LinkContainer> : null}
                </NavDropdown> : null}
                <NavItem eventKey={7} to="/Help">HELP</NavItem>
                <NavItem eventKey={8}><NavLink to="/logout">LOGOUT</NavLink></NavItem>
              </Nav>
          </Navbar>

          <Route exact path="/" component={Home} />
          <Route path="/PkgQuery" component={PkgQuery} />
          <Route path="/CustQuery" component={CustQuery} />
          <Route path="/CustUpdate" component={CustUpdate} />
          <Route path="/PkgReports" component={PkgReports} />
          <Route path="/IntlReports" component={IntlReports} />
          <Route path="/SalesReports" component={SalesReports} />
        </div>
      </Router>
    );
  }
}

最佳答案

因为缺乏代表性，所以写这个作为答案。
您可以考虑使用react-router-bootstrap，因为它结合了react bootstrap和react router，所以您的页面不会在每次单击错误的链接时重新加载。

关于html - ReactJs-SPA导航栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50453517/