Question

我已经使用入门模板创建了一个新的gatsby网站。我已经安装了react-bootstrap v1.0.0-beta.9，bootstrap v4.3.1，react-router-bootstrap v0.25.0，react-router-dom v5.0.1。在Header.js（我将其重命名为Navigation.js）中，我删除了大部分样板代码，并用简单的React-Bootstrap Navbar代替了它。

单击Nav.Link时，整个页面都会刷新，这不是我想要的。我只希望呈现链接所单击的页面组件。我发现了一个称为LinkContainer的东西，但未能使其正常工作。

将React-Bootstrap组件包装在LinkContainer中时收到以下错误：

（AppContainer，在withRouter（LinkContainer）中（在Navigation.js：12））错误：不变失败：您不应在
之外使用

有人可以帮助我实现这一目标吗？我对Gatsby和React并不那么熟悉，因为这是我第一次尝试使用它。

谢谢。

import { Link } from "react-router-dom"
import PropTypes from "prop-types"
import React from "react"
import {Navbar, Nav, NavItem, NavDropdown, Form, FormControl, Button} from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'
const Navigation = ({ siteTitle }) => (
  <Navbar bg="light" expand="lg">
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="mr-auto">
      <LinkContainer to="/page-2/">
        <Nav.Item>Page-2</Nav.Item>
      </LinkContainer>
      <NavDropdown title="Dropdown" id="basic-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>
    </Nav>
    <Form inline>
      <FormControl type="text" placeholder="Search" className="mr-sm-2" />
      <Button variant="outline-success">Search</Button>
    </Form>
  </Navbar.Collapse>
</Navbar>
)

Navigation.propTypes = {
  siteTitle: PropTypes.string,
}

Navigation.defaultProps = {
  siteTitle: ``,
}

export default Navigation

如何使用LinkContainer在gatsby网站中的Navbar中路由NavItem

0 个答案: