CODEWITHSUNDEEP
reactjsreact-routergatsbyreact-bootstrapsanity
Tim
Tim

Reputation: 891

React-Router-Bootstrap <LinkContainer> Error: You should not use <withRouter(LinkContainer) /> outside a <Router> - Gatsby problem?

'm creating a project using Sanity and Gatsby.js. I'm theming using react-bootstrap. The Link I'm tying to create with LinkContainer from react-router-bootstrap

But I can't seem to get it to work. In development I get Error: Invariant failed: You should not use outside a

I'm pretty new to React, but it seems to reffer to a Component? Could Gatsby.js interfere with it? I have no clue where to start :) I've followed the very short documentation of the react-router-bootstrap page. This is my current code##

  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? :)

Upvotes: 1

Views: 3736

Answers (3)

Mokoro Nelson
Mokoro Nelson

Reputation: 1

import { Link } from 'react-router-dom'

<Nav.Link as={Link} to="/">

Upvotes: 0

Job Collins
Job Collins

Reputation: 158

Try wrapping your in index.js file with BrowserRouter from react-router-dom.

Like:

import { BrowserRouter } from 'react-router-dom

...

<BrowserRouter>
    <App />
</BrowserRouter>

Upvotes: 1

Alex
Alex

Reputation: 3991

You should use <LinkContainer > inside Router 

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

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

look at this sample, could be useful

Upvotes: 0

Related Questions