React-Router-Bootstrap ‹LinkContainer› Ошибка: вы не должны использовать ‹withRouter (LinkContainer) /› за пределами ‹Router› - проблемы с Гэтсби?

Создаю проект с использованием Sanity и Gatsby.js. Я создаю темы с помощью response-bootstrap. Ссылка, которую я связываю, чтобы создать с помощью LinkContainer из response-router-bootstrap

Но я не могу заставить его работать. В процессе разработки я получаю сообщение об ошибке: ошибка инварианта: вы не должны использовать его вне

Я новичок в React, но, кажется, он ссылается на компонент? Мог ли Gatsby.js этому помешать? Понятия не имею, с чего начать :) Я следил за очень короткой документацией на странице response-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 gatsby react-router react-bootstrap sanity
person Tim    schedule 04.02.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте обернуть ваш файл index.js с помощью BrowserRouter из response-router-dom.

Нравиться:

import { BrowserRouter } from 'react-router-dom

...

<BrowserRouter>
    <App />
</BrowserRouter>
person Job Collins    schedule 07.04.2021

arrow_upward
0
arrow_downward

Вы должны использовать <LinkContainer > внутри Router

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

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

посмотрите на этот образец, может быть полезно

person Alex    schedule 04.02.2020