html - ReactJs - SPA 导航栏

Question

问题

所以我正在努力用 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>
    );
  }
}

Answer 1

由于缺乏代表，将其写为答案。

您可以考虑使用 react-router-bootstrap因为它结合了 react-bootstrap 和 react-router，所以您的页面不会在您每次点击错误链接时重新加载。