Как использовать LinkContainer для маршрутизации NavItem в Navbar на сайте gatsby

Question

Я создал новый сайт gatsby, используя стартовый шаблон.Я установил response-bootstrap v1.0.0-beta.9, bootstrap v4.3.1, response-router-bootstrap v0.25.0, response-router-dom v5.0.1.В Header.js (который я переименовал в Navigation.js) я удалил большую часть стандартного кода и заменил его простым React-Bootstrap Navbar.

При нажатии на Nav.Link вся страница обновляется, и это не то, что я хочу.Я просто хочу, чтобы компонент страницы, на который нажала ссылка, отображался.Я обнаружил нечто, называемое LinkContainer, но не смог заставить его работать.

Я получаю следующую ошибку при переносе компонента React-Bootstrap внутри LinkContainer:

(AppContainer,in withRouter (LinkContainer) (at Navigation.js: 12)) Ошибка: сбой инварианта: вы не должны использовать вне

Может кто-нибудь помочь мне в полученииэто на работу?Я не так хорошо знаком с Гэтсби и Реактом, поскольку это моя первая попытка работать с ним.

Спасибо.

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