TypeError: Unable to get property 'history' of undefined or null reference render

[vladp]

I am getting an error in LinkContainer (see below). Wanted to check if the react-router-bootstrap is compatible with 4.3.x series of react-router.

Thank you

TypeError: Unable to get property 'history' of undefined or null reference
render
C:/myProj/node_modules/react-router-bootstrap/lib/LinkContainer.js:96
  93 |     getIsActive = _props.isActive,
  94 |     props = _objectWithoutProperties(_props, ['children', 'replace', 'to', 'exact', 'strict', 'activeClassName', 'className', 'activeStyle', 'style', 'isActive']);
  95 | 
> 96 | var href = this.context.router.history.createHref(typeof to === 'string' ? { pathname: to } : to);
  97 | 
  98 | var child = _react2.default.Children.only(children);
  99 | 

import {
Route,
RouteHandler,
Link,
Switch,
Redirect } from 'react-router-dom';

import { Nav,
         Navbar,
         NavDropdown,
         Button,
         MenuItem,
         NavItem} from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";

class App extends Component {
  render() {
    return (
        <div className='todos'>

          <div className='text-right'>                    

            <Link to='/todos/new' className='btn btn-primary'>

              Create Todo

            </Link>

            
            <LinkContainer to='/todos/new'>

              <Button> VT </Button>

            </LinkContainer>

          </div>

        </div>
    );   
  }
}

{
    "name": "ua1b",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "create-react-class": "15.6.3",
        "proxyquire": "^2.0.1",
        "react": "^16.3.1",
        "react-dom": "^16.3.1",
        "react-native-material-kit": "github:xinthink/react-native-material-kit#master",
        "react-native-section-list-get-item-layout": "2.2.1",
        "react-native-vector-icons": "^4.5.0",
        "react-native-web": "^0.5.4",
        "react-router-dom": "^4.3.0-rc.2",
        "react-bootstrap": "^0.32.1",
        "react-router-bootstrap": "^0.24.4",
        "react-scripts": "1.1.4",
        "rewire": "^4.0.0",
        "tree-model": "^1.0.6"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject",
        "ostart": "node scripts/customized-config start",
        "obuild": "node scripts/customized-config build",
        "otest": "node scripts/customized-config test --env=jsdom"
    },
    "devDependencies": {
        "babel-plugin-react-native-web": "^0.5.4"
    }
}

[manonthemoon42]

Same here.
Have you found the problem @vladp ?

[vladp]

no unfortunately. And this specific sub-project does not seem to be maintained.

Instead I picked up the idea of using 'withRouter', that gives me access to history api, which means that I can push onto history stack when the user clicks the navigation item:

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

/* from
 *  https://github.com/react-bootstrap/react-router-bootstrap/issues/186
 */

/*
   this is a custom component that I picked up from readings.
   Basically,this particular component *does not* need to have been
   invoked by Router.  Instead it can be just its own component.
   
   see this article for more detail
   https://tylermcginnis.com/react-router-programmatically-navigate/

   another discussion on the same topic
   https://stackoverflow.com/questions/42672842/how-to-get-history-on-react-router-v4
*/

class NavItemWithoutRouter extends React.Component {
  
  constructor(props) {
    super(props);
    this.handleLink = this.handleLink.bind(this);
  }
  
  handleLink(path) {
    this.props.history.push(path);
  }

  render() {
    const { to, eventKey, children, onSelect } = this.props;
    return (
      <NavItem        
        eventKey={eventKey}
        onSelect={onSelect}
        onClick={()=>this.handleLink(to)}>
        {children}
      </NavItem>
    );
  }
}



const RouterNavItem = withRouter(NavItemWithoutRouter)
export default RouterNavItem;

Then, you can use the NavItemWithoutRouter in place of NavItem.
Only thing you have to make sure is that the 'to' attribute is valid (and is an actual path that your Router is setup to handle)

[v12]

Related to #249, #250 and fixed in v0.25.0.