Open lineldcosta opened 6 years ago
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)
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.
Thanks, I will take a look to see if I can reproduce it.
Same problem here, still no solution?
@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."
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;
} # ...
I am also having this problem using react-router@5.0.1, react-router-dom@5.0.1
. 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')
);
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.
I got the same problem,while set to react-router to 4.1.1 didn't work for me.
@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
@leonelgalan it's like this,I am using create-react-app
for the app,while using react-router-dom@5.0.1
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
};
@fatpandaria, for are using react-router-dom@5.0.1, 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
?
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?
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.
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