TypeError: Cannot read property 'history' of undefined

[ghost]

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?

[ghost]

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 [email protected] 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!