React-Router-Bootstrap <LinkContainer> 错误：您不应该在 <Router> 之外使用 <withRouter(LinkContainer) /> - Gatsby 问题？答案

【问题标题】：React-Router-Bootstrap <LinkContainer> Error: You should not use <withRouter(LinkContainer) /> outside a <Router> - Gatsby problem?React-Router-Bootstrap <LinkContainer> 错误：您不应该在 <Router> 之外使用 <withRouter(LinkContainer) /> - Gatsby 问题？
【发布时间】：2020-05-20 07:34:35
【问题描述】：

正在使用 Sanity 和 Gatsby.js 创建一个项目。我正在使用 react-bootstrap 进行主题化。我要使用来自 react-router-bootstrap 的 LinkContainer 创建的链接

但我似乎无法让它工作。在开发中我得到错误：不变量失败：你不应该在一个外部使用

我对 React 很陌生，但它似乎引用了一个组件？ Gatsby.js 会干扰它吗？我不知道从哪里开始 :) 我遵循了 react-router-bootstrap 页面的非常简短的文档。这是我当前的代码##

  import React from "react"
  import {NavItem} from "react-bootstrap";
  import {LinkContainer} from 'react-router-bootstrap';

  class GetNavItem extends React.Component {
    render() {
      const {item} = this.props;

      let link = item.link
      if (link === "home")
        link = "/"

      return (
          <LinkContainer to={link} activeClassName="active">
            <NavItem eventKey={1}>{item.title}</NavItem>
          </LinkContainer>
      )
    }
  }

What am I doing wrong here? :)

【问题讨论】：

标签： reactjs react-router gatsby react-bootstrap sanity

【解决方案1】：

尝试使用 react-router-dom 中的 BrowserRouter 将您的 in index.js 文件包装起来。

喜欢：

import { BrowserRouter } from 'react-router-dom

...

<BrowserRouter>
    <App />
</BrowserRouter>

【讨论】：

【解决方案2】：

您应该在Router 中使用<LinkContainer >

export default function App() {
  return (
    <div className="App"> 
      <Router>    
       <GetNavItem />

      <Route path='/about' component={About} />
      <Route path='/' component={Home} />
      </Router>>
    </div>
  );
}

看看这个sample，可能有用

【讨论】：