Tutorial error step - Adding Links in the Navbar - step import { LinkContainer } from "react-router-bootstrap";

1

Hi all , i love the Tutorals and have been teaching me to much, but once i got to
Adding Links in the Navbar - step import { LinkContainer } from “react-router-bootstrap”;

and do npm start all i get is a website with errors

TypeError: Cannot read property ‘history’ of undefined

LinkContainer.render

C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-router-bootstrap/lib/LinkContainer.js:147

there is more if you need them i would really like to continue :slight_smile:

2

I had the same issue, it comes from a change in react-router-dom.
To get around it import withRouter from react-router-dom, and use it to wrap the LinkContainer components.

So I created a separate component in RoutedLinkContainer.js.

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

function RoutedLinkContainer(props) {
  return (
    <LinkContainer to={props.link}>
      <NavItem>{props.displayText}</NavItem>
    </LinkContainer>
  );
}

export default withRouter(RoutedLinkContainer);

In App.js import RoutedLinkContainer at the top, and replace the lines:

    <LinkContainer to="/signup"><NavItem>Signup</NavItem></LinkContainer>
    <LinkContainer to="/login"><NavItem>Login</NavItem></LinkContainer>

with:

    <RoutedLinkContainer link="/signup" displayText="Signup" />
    <RoutedLinkContainer link="/login" displayText="Login" />
1 Like
3

Thanks for helping out @pete!

It looks like the react-router-bootstrap guys are going to push out a fix for this soon - https://github.com/react-bootstrap/react-router-bootstrap/pull/248.

4

For now I edited the guide to stick to react-router 4.3.1 while a fix is rolled out.