React-router-bootstrap is not working with react-router 5.0.0

[kris2kris]

Since react-router is in version 5.0.0, react-router-bootstrap is not working.

The following error occurred LinkContainer.js:147 Uncaught TypeError: Cannot read property 'history' of undefined at LinkContainer.render (LinkContainer.js:147)

More information about this problem can be find here [(https://github.com/remix-run/react-router/issues/6630)]

for information :

@sampsakuronen We have never documented or supported using this.context.router directly. That's our private API. I discussed this in the release notes to 4.4.0-beta.0.

[mxschmitt]

I think #248 fixed that, but we have to publish a new release.
cc @jquense @taion

[ArnoSaine]

Here's a workaround until #248 is released:

import React from 'react';
import PropTypes from 'prop-types';
import { BrowserRouter, withRouter } from 'react-router-dom';

<BrowserRouter>
  <RouterContextProvider>
    // ...
  </RouterContextProvider>
</BrowserRouter>

const RouterContextProvider = withRouter(
  class extends React.Component {
    static childContextTypes = {
      router: PropTypes.object
    };

    getChildContext() {
      const { children, ...router } = this.props;
      return { router };
    }

    render() {
      return this.props.children;
    }
  }
);

[v12]

This issue is resolved in v0.25.0, which is already published to npm.

[batbayar-su]

Still having this issue in v0.25.0

[v12]

@batbayar-su could you please provide an example that reproduces the problem? Original issue was resolved and you need to elaborate what your setup is to ensure that your issue is the same.

[batbayar-su]

Here's a workaround until #248 is released:

import React from 'react';
import PropTypes from 'prop-types';
import { BrowserRouter, withRouter } from 'react-router-dom';

<BrowserRouter>
  <RouterContextProvider>
    // ...
  </RouterContextProvider>
</BrowserRouter>

const RouterContextProvider = withRouter(
  class extends React.Component {
    static childContextTypes = {
      router: PropTypes.object
    };

    getChildContext() {
      const { children, ...router } = this.props;
      return { router };
    }

    render() {
      return this.props.children;
    }
  }
);

It worked with this modification. @ArnoSaine could you explain to me why it is necessary, please?

[ArnoSaine]

It worked with this modification. @ArnoSaine could you explain to me why it is necessary, please?

@batbayar-su react-router-bootstrap <0.25 uses this.context.router to access React Router context. React Router v5 switched to the current context API and this.context.router is not available.

<RouterContextProvider> uses the legacy context API to provide router context (this.context.router) to its children, so it's possible to use React Router v5 with react-router-bootstrap <0.25.

[martinduo]

I have this problem using react-router-bootstrap v0.25.0 and react-router-dom v5.1.2. My environment is from CRA and I do not know how to apply the workaround shown. How and where do I add that workaround? Any example code or instructions? Is there a substitute for react-router-bootstrap I could try?

[martinduo]

Update to my last above: After stopping work on my project due to this bug, I came back 2 days later and it works with no error. Does this mean it's a timing bug? And if I had restarted at the time it would have gone away?