I am trying to use IonReactRouter with private routes and am using the standard react-router-dom implementation.
For some reason that I am struggling to understand the router is not passing the match or location props.
I have added a question to stack overflow that explains in full. I would really appreciate any help.
Have you tried providing those props with withRouter?
<PrivateRoute exact path="/Dashboard/:id">
<Dashboard />
</PrivateRoute>
As it stands in your example, it doesn’t look like the props are set on the PrivateRoute, so it doesn’t actually get those passed
As in do I have withRouter wrapping App.js? If so yes.
export default withRouter(connect(mapStateToProps)(App));
I also wrapped the app in index.tsx with IonReactRouter instead of Browser Router.
const app = (
<Provider store={store}>
<IonReactRouter>
<App />
</IonReactRouter>
</Provider>
);
ReactDOM.render(app, document.getElementById('root'));
I am sure I am missing something simple but I can’t seem to spot it.
App with IonReactRouter, that is wrong.Hi Mike,
Thanks for getting back. I read on this page. I confused “Therefore, use IonReactRouter in place of BrowserRouter.” hence tried to use in the same way.
Is there a way to avoid using the Ionic router all together? Or if not disabling the animations for web? Lastly, does Ionic Router hold some kind of cache of the component?
So, I think I have worked out what was wrong.
I was rendering the private routes like this:
<PrivateRoute exact path="/Dashboard/:id">
<Dashboard />
</PrivateRoute>
It appears I need to do the following instead:
<PrivateRoute exact path="/Dashboard/:id" component={Dashboard } />
Problem with developer not Ionic 
Do you guys offer premium support? There are a couple other things we could do with sanity checking before going to production.
Hey @mhartington, any word on if we can buy premium support? I am still having major issues with the router. It seems to be caching my components? When I navigate away from one and then navigate back, the component does not render from fresh again. Is this a bug? It is having a real impact on some data visualisations. Can this be overridden?
We offer enterprise support though our commercial services. Though it doesn’t make sense for all use cases/people.
As for caching…this is by design. It’s how Ionic handles routing in all frameworks.
Please see the routing docs for react.
Thanks for the enterprise link. Is there any way to work around the caching? It seems really odd that there would be no way to be confident when my component has actually “unmounted” versus hanging around somewhere.
Is the state fully preserved?
If the behaviour was consistent with the docs then I would have posted to be fair.
This has been the default experience for Ionic since day one.
If you have a route (Route A) and you navigate to Route B, Route A is kept in the DOM so navigation back is instant. Plus this enables swipe to go back on the main router outlet in iOS mode.
This is why we have the view lifecycle hooks
These cover cases when the Route is “leaving”, but not being destroyed.
Thanks,
I will have a look to see if I can make something work with Ion Lifecycles.
Part of the reason I wanted to see if I could disable the caching was to see if that was indeed the issue at hand or if the issue is with react-google-charts, or just Google Charts.
For example, this:
Once the page has been cached the screen below is what I get every time.
I have confirmed that it is only when the page has been cached so I hope you understand my thinking of wanting to see if I could work around it to confirm or eliminate the source.
I appreciate the help.
Hi! What if you need to pass props to Dashboard?
