TypeError: Cannot read property 'history' of undefined

TypeError: Cannot read property 'history' of undefined
LinkContainer.render
C:/Users/dd/Projects/vv/vv-app/node_modules/react-router-bootstrap/lib/LinkContainer.js:96

Struggling with using react-bootstrap and react-router-bootstrap. I created a basic navbar but no matter what (tried many examples online using a const in a file and a Component itself) but I get that error. Please help

import React, { Component, PropTypes } from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';

class MyNavBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loggedIn: 1,
    };
  }

  render() {
    return (
      <div>
        <Navbar>
          <Navbar.Header>
            <Navbar.Brand>
              <a href="/">My space</a>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav>
              <LinkContainer to="/tips">
                <NavItem>Tips</NavItem>
              </LinkContainer>
              <LinkContainer to="/url-to-link2">
                <NavItem>Item 2</NavItem>
              </LinkContainer>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <div className="content">
          {this.props.children}
        </div>
      </div>
    );
  }
}


export default MyNavBar;

[alex-brambila]

I've got the same thing...trying to port NavMenu.js from VS2017 to .tsx and getting the same error. Any chance you've gotten this working?

I've got the same thing...trying to port NavMenu.js from VS2017 to .tsx and getting the same error. Any chance you've gotten this working?

Here is what I did - I went with a recommended react-router-dom instead which has a lot of support

Firstly, you need a router for the navigation items (I put it in App.js)

import { HashRouter, Switch, Route} from 'react-router-dom';
<<<more stuff like constructor>>>

render() {
    return (
      <div className="App">
      <HashRouter>
        <div>
          <NavBar />
          <Switch>
            <Route component={Home} path="/home" />
            <Route component={Company} path="/company" />
            <Route component={Ack} path="/ack" />
            <Route component={Home} path="/" />
          </Switch>
        </div>
      </HashRouter>

      </div>
    );
  }

And then in my Navbar.js component I used reactStrap bootstrap library:

import React from 'react';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem } from 'reactstrap';
  import './NavBar.css';
<<<more stuff like constructor>>>
  render() {
    return (
      <div className="NavBar">
        <Navbar className="navColor" expand="md" id="navbar">
          <NavbarBrand className="navLinkColor" id="nav-home" href="/">
          <img src={require('../../images/xxx.png')} alt="xxx logo" />xxx</NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle  className="navLinkColor" nav caret>
                  Forms
                </DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem>
                    <NavLink className="navDropdownColor" id="nav-form" href="#/form"> Form</NavLink>
                  </DropdownItem>
                  <DropdownItem>
                    <NavLink className="navDropdownColor" id="nav-company" href="#/company">Company Form</NavLink>
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
              <NavItem>
                <div className="navAbout navLinkColor" id="about-nav"><a onClick={this.onShowModal}><i className="fa fa-info-circle"></i></a></div>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>

      </div>
    );
  }

[ericgio]

I ran across this issue as well and for me it was related to my version of react-router-dom. More specifically, upgrading from 4.3.1 to 4.4.0 triggered the issue. I didn't look too deeply into the root cause, but it looks like react-router-dom@4.4.0 changes how context is used and causes that line in LinkContainer to fail.

[travisdieckmann]

@ericgio I too am struggling with this same issue upgrading from 4.3.1 to 4.4.0

[kfitzgerald]

Hint: https://github.com/ReactTraining/react-router/releases/tag/v4.4.0-beta.0

We also made it explicit in this release that you can't use contextTypes to access properties on this.context.router anymore. If you try, you'll get a warning. That's our private API! If you need stuff on context, just use a or withRouter instead. It's all the same stuff, and that's our public API 👍

🚨 In a future release, we will remove the old context API entirely so your app will break if you were using our private API. 🚨

[kfitzgerald]

I hacked a fix locally with tests passing. Haven't tested it yet beyond that: https://github.com/kfitzgerald/react-router-bootstrap/tree/context-fix

I'll drop a PR if it fixes the issue.

TL;DR: need to wrap the LinkContainer component with withRouter, but also strip this.context usages.

[hoummani]

using React Router Hooks

You can use useHistory hooks from react-router-dom inside a function component like this:
import { useHistory } from 'react-router';
const history = useHistory();
And start use it :
history.push('/dashboard')

Please note: You need to be using React >= 16.8 in order to use any of these hooks!