React-router: Warnings when using react-router-config's renderRoutes()

Created on 4 Oct 2018 · 9Comments · Source: ReactTraining/react-router

Version

react-router, react-router-config and react-router-dom are all in version 4.4.0-beta.1.
react and react-dom are at 16.5.2.

Steps to reproduce

entry:

render(<BrowserRouter>{renderRoutes(routes)}</BrowserRouter>, document.getElementById('root'))

If I replace only {renderRoutes(routes)} with <Root/>, warnings are not longer printed to the console.

routes being:

export default [
    {
        component: Root
    }
]

Root

export class Root extends PureComponent {
    render() {
        return (
            <h1>Root</h1>
        )
    }
}

Expected Behavior

Components are rendered without any warnings.

Actual Behavior

Warning: You should not be using this.context.router.history directly. It is private API for internal use only and is subject to change at any time. Instead, use a <Route> or withRouter() to access the current location, match, etc.
Warning: You should not be using this.context.router.location directly. It is private API for internal use only and is subject to change at any time. Instead, use a <Route> or withRouter() to access the current location, match, etc.
Warning: You should not be using this.context.router.match directly. It is private API for internal use only and is subject to change at any time. Instead, use a <Route> or withRouter() to access the current location, match, etc.
Warning: You should not be using this.context.router.staticContext directly. It is private API for internal use only and is subject to change at any time. Instead, use a <Route> or withRouter() to access the current location, match, etc.

Source

artuross

👍2

All 9 comments

How are you importing BrowserRouter? There's likely a mis-match between the bundle you're using and what react-router-config is doing internally. The warning from the 4.4.0-beta.1 release applies here.

timdorr on 4 Oct 2018

I tried those two:

import BrowserRouter from "react-router-dom/es/BrowserRouter";
import {BrowserRouter} from "react-router-dom";

artuross on 4 Oct 2018

The only time those warnings should be triggered is if you're accessing this.context.router directly in one of your components. The code in react-router-config does not.

If you are using this.context.router, switch it to use either a regular <Route> component or withRouter.

mjackson on 10 Oct 2018

I wasn't using it though :) I believe there was a mismatch in loaded modules. After I removed node_modules and installed dependecies again, it dissapeared.

artuross on 11 Oct 2018

Ah, I see. Ya, if you were using e.g. react-router-dom 4.3.x with the 4.4 beta of react-router you would probably get those warnings.

Since it seems like your problem is resolved, I'll go ahead and close. But this issue may prove valuable for others who run into the same problem, so thank you for bringing it up @artuross :)

mjackson on 11 Oct 2018

😄1

Hi all.
I know you have closed this issue, but unfortunately, I have the same warning in development, being both react-router and react-router-dom in version 4.4.0-beta.1

Warning: You should not be using this.context.router.history directly. It is private API for internal use only and is subject to change at any time. Instead, use a <Route> or withRouter() to access the current location, match, etc.

It's is triggered after triggering setState over component that renders Router, and my import is consistent:

import {
  BrowserRouter as Router,
  Redirect,
  Route,
  Switch
} from 'react-router-dom';

luchoct on 11 Oct 2018

It appeared again... I have no idea what is causing this. I haven't even installed anything. Even still, I tried yarn and it didn't solve the issue. I can't share my project, however I will try to reproduce it on something I can share.

artuross on 11 Oct 2018

👍1

@artuross @luchoct Do you still get this error when running without extensions? It could be caused by the react devtools.

GeKorm on 20 Oct 2018

Hi @GeKorm,
Yes, I confirm I get the message even running without any extensions.
I can see the log Download the React DevTools for a better development experience: https://fb.me/react-devtools in console.

luchoct on 22 Oct 2018

👍1

Was this page helpful?

0 / 5 - 0 ratings