Usage react-url-query with react-router v4 throwing error

[lineldcosta]

I am using react-url-query with react-router v4 as shown in the example but its throwing No history provided to react-url-query. Please provide one via configureUrlQuery. error

[pbeshai]

Are you sure you're using the RouterToUrlQuery component in your code?

e.g.

import { RouterToUrlQuery } from 'react-url-query';
import Router from 'react-router/BrowserRouter';

ReactDOM.render(
  <Router>
    <RouterToUrlQuery>
      <App />
    </RouterToUrlQuery>
  </Router>,
  document.getElementById('root')
);

(see index.js in the example)

[lineldcosta]

Yes same thing i copied from your examples.. If you get time once try with new react-router-dom. I tried many times but i got the same results, then with no other options i had to copy the logic from your src folder without using this library.

[pbeshai]

Thanks, I will take a look to see if I can reproduce it.

[joka828]

Same problem here, still no solution?

[leonelgalan]

@lineldcosta and @joka828? Do you still have access to an App that exhibits this issue? I have a slight variation of it where I use ConnectedRouter instead (from connected-react-router) and I noticed that the context passed to RouterToUrlQuery is and Empty Object and before getting the error you guys posted, I get a warning saying: "RouterToUrlQuery: router object not found in context. Not configuring history for react-url-query."

• Do you see the same warning before the error? On Development.
• Could you explore what's the context RouterToUrlQuery is getting?

I'm trying to confirm it's not ConnectedRouter causing the issue before I post my own.

* On Production the warning isn't shown and the entire app crashes in the last because router is undefined. In lib/react/RouterToUrlQuery.js:

      if (process.env.NODE_ENV === 'development' && !router) {
        // eslint-disable-next-line
        console.warn('RouterToUrlQuery: `router` object not found in context. Not configuring history for react-url-query.');
        return;
      }

      var history = void 0;

      if (router.history && router.history.push && router.history.replace) {
        history = router.history;
      } # ...

[jjPlusPlus]

I am also having this problem using [email protected], [email protected]. I noticed the example is running 4.1.1

@leonelgalan I see the same warning, and after inspection I see that the context is empty router: undefined. I noticed in the example that Router is imported from 'react-router/BrowserRouter' instead of import { BrowserRouter as Router } from "react-router-dom";.

You also mentioned that you are using connectedRouter- Well, I'm using a Firebase HOC so maybe for both of us the external library is causing the problem... This is my setup, for example.

ReactDOM.render(
  <Provider store={store}>
    <ReactReduxFirebaseProvider {...reactReduxFirebaseProps}>
      <Router>
        <RouterToUrlQuery>
          <App />
        </RouterToUrlQuery>
      </Router>
    </ReactReduxFirebaseProvider>
  </Provider>
  , document.getElementById('root')
);

[jjPlusPlus]

Ah, yes, okay, pinning react-router-dom & react-router to 4.1.1 fixes it (at least for my implementation). It appears that react-router introduced changes with a new internal-only context API for v5.

[fatpandaria]

I got the same problem,while set to react-router to 4.1.1 didn't work for me.

[leonelgalan]

@fatpandaria, would you share with us some code? Is router being passed in the context? What other versions are you using?

Like @jjPlusPlus said, it appears that reading the router from the context was never supposed to be public API and that we should be using the withRouter instead: https://github.com/ReactTraining/react-router/blob/v4.0.0/packages/react-router/docs/api/context.router.md

[fatpandaria]

@leonelgalan it's like this,I am using create-react-app for the app,while using [email protected] for routes and react-loadable for code splitting.I configure the routes in a separate file.I bypassed this issue by passing the history to configureUrlQuery in my component.I am using the react-loadable, so I am not sure whether I put the RouterToUrlQuery in the right place;Here is the code I used:

The src/index.js is like this:

// other codes...
import {Routes} from './routes/index';
ReactDOM.render(
    <Provider store={store}>
        {Routes}
    </Provider>
    , document.getElementById('root'));

The routes/index.js is like this:

import React from 'react';
import Loadable from 'react-loadable';
import MyLoadingComponent from '../components/common/MyLoadingComponent';
import { Route, Switch, BrowserRouter as Router } from "react-router-dom";
import { RouterToUrlQuery } from 'react-url-query';

let AsyncHome = Loadable({
    loader: () => import('../containers/Home'),
    loading: MyLoadingComponent,
})
let AsyncChild = Loadable({
        loader: () => import('../containers/Child'),
        loading: MyLoadingComponent,
    })
const routes = [
    {
        path: '/',
        component: AsyncHome,
        children: [
            {
                path: '/child',
                component: AsyncChild,
            },
        ]
    },

]
function AlignRoute(routeProps) {
    return (
        <Route
            path={routeProps.path}
            render={
                props => (
                    <routeProps.component {...props} routes={Array.isArray(routeProps.children) && routeProps.children.map((childRoute, index) => (
                        <AlignRoute key={index} {...childRoute} />
                    ))} />
                )
            }
        />
    )
}

const Routes = (<Router>
        <Switch>
            <RouterToUrlQuery>
                {routes.map((route, index) => (
                    <AlignRoute key={index} {...route} />
                ))}
            </RouterToUrlQuery>
        </Switch>
    </Router>)

        
export {
    Routes
};

[leonelgalan]

@fatpandaria, for are using [email protected], but as you can see for previous comments, you have to stay on 4.1.1 for now. You said previously that it didn't work, but you didn't say how it didn't work. Once you go back to 4.1.1, is router defined in the context inside RouterToUrlQuery?

[lemmingapex]

react-url-query does not functioning when using react-router-dom version 5.0.1. No history provided to react-url-query. Please provide one via configureUrlQuery. is shown in the console and there does not appear to be a valid history object as react-url-query expects. react-router-dom version 5.0.1 was released Jun. 4. When can we expect this to be fixed?

[UberMouse]

I've created PR #64 which updates the library to work correctly with React Router v5.

I've also forked this to our organization and merged that branch into master, I've also included all the built dist files in master so you can depend on the package directly from Github. I wouldn't recommend this because we might remove the repo with no warning (I would recommend you fork the repo first), but it provides an alternative if this PR does not get merged soon.