reactjs - 反应路由器引导程序错误：您不应该使用外面- 盖茨比问题？

Question

'正在使用 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? :)

Answer 1

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

喜欢：

import { BrowserRouter } from 'react-router-dom

...

<BrowserRouter>
    <App />
</BrowserRouter>

Answer 2

你应该<LinkContainer >在里面 使用Router

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

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

看看这个样本，可能有用