ReactJs - SPA Navbar

时间：2018-05-21 17:04:05

标签： html css reactjs

问题

所以我正在创建一个ReactJs的单页应用程序，但我的Navbar出现了问题。我似乎无法使导航按钮正确链接到页面而无需重新加载网页而不是更新渲染的组件。

当我尝试以下操作时：
<NavItem eventKey={1} href="/someLink">someLink</NavItem>

我发现点击相应的导航按钮会重新加载包含正确预期内容的页面，而不是仅更新渲染的组件。

当我尝试以下操作时：
<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>
    );
  }
}

1 个答案:

答案 0 :(得分：1)

由于缺乏代表，将此作为答案。

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

相关问题
最新问题