Hi,
I’ve been trying to get routing working for … too long.
I have it down to the following.
<IonApp>
<IonReactRouter>
<IonSplitPane contentId="main">
<IonRouterOutlet id="main">
<Route path="/page/Home" component={HomePage}/>
<Route path="/page/Login" component={LoginPage}/>
<Redirect exact from='/page/Counter' to='/page/Login'/>
</IonRouterOutlet>
<IonContent>
<IonList id="menu-list">
<div><Link to={'/page/Home'}>Home</Link></div>
<div><Link to={'/page/Login'}>Login</Link></div>
<div><Link to={'/page/Counter'}>Counter</Link></div>
</IonList>
</IonContent>
</IonSplitPane>
</IonReactRouter>
</IonApp>
If I click on Home or Login, all is good.
If I click on Counter, then the URL updates to http://localhost:3000/page/Counter, however a blank screen is rendered. If I then click in URL address bar and manually hit enter, the URL updates automatically to http://localhost:3000/page/Login and the Login page is shown.
I would expect the navigation to happen when I click on the Counter link.
Also, the same behaviour is happening with <IonItem routerLink ='/page/Counter'/> as well.
Can anyone see what I’m doing wrong?
Thank you! 
what is the purpose of having this as a Route?
HI.
I’m trying to set up routes that will redirect to the log in page if someone is not logged in. That example I gave has been simplified. In practise, I have a check which would render a normal for ‘/page/Counter’ if they are logged in. When redux state changes from loggedIn=true to loggedIn=false, I plan to re-render the menu / route components so that any ‘restricted’ routes will become s.
Does that make sense?
using a wrapper component to check for auth status before rendering a route is the recommended pattern.
Protected routes and authentication with React Router v5 - ui.dev
Thanks very much Aaron. That’s actually the article which I started with and wrestled with for quite a while. After I couldn’t get it to work reliably, I pared it down to what I posted above.
I’ve just gone and re-implemented the pattern which they describe in the article and I’m seeing the same issue, namely:
When not logged in, If I navigate to a protected URL via the address bar, I am redirected correctly. If however I navigate to a protected URL via a routerLink or a Link, then the URL updates to the protected URL, however not to the redirected one. Clicking into the address bar and clicking enter will cause the redirection.
Unless I’m missing something, I think that this is a bug. I’m not sure if it’s in React Router or Ionic.
send me a link your project os the source code i will take a look, or create a small project in stackblitz
I put together this project to get started, please add your changes
react-xcqsp3 - StackBlitz
Hi Aaron,
I forked your code and edited a copy here:
https://stackblitz.com/edit/react-1g5v5u
I recorded a screencast demonstrating the issue and uploaded it here:
https://youtu.be/FbnlxPJ7K3M
The project I’m working on is still in very early stages and I’m able to share it if you like. There’s probably no need though if the issue is reproducable as above.
Thanks again for your help. This has me blocked.
Hi Aaron,
My main project has protected routes which have been set up similarly to the article you linked to here. I’m happy to post that if needed, however the problem can be demonstrated more simply I think using StackBlitz.
Perhaps I should be clear about my goal.
I want to register a route (page/Counter) which, when navigated to by a <Link /> or by directly entering in the URL, redirects the user to another page.
In the demo I posted, I redirected counter to ‘page/Home’. In practise if they were logged out, you’d presumably send them to page/Login, but that’s not the point.
Notice that one key difference in what I posted to what you posted. You had a ‘catch all’ at the bottom of your routes to Login. My requirement is different. I specifically want to catch navigations to page/Counter and redirect them.
In the demo I posted here, it works as expected once, but not twice. I can replicate the issue with the following steps.
- Load page (I had to press ctrl-shift-r in Chrome… not just the refresh button in StackBlitz)
- click ‘home’ → You are taken to Home.
- click ‘login’ → You are taken to Login
- click ‘counter’ → You are taken to Home (which is what I would expect. Counter redirects to Home)
- click ‘home’ → You are taken to Home.
- click ‘login’ → You are taken to Login
- click ‘counter’ → Error! The url says /page/Counter, however the Login component is still displayed.
Does that make sense?
Now, in my demo project which matches the article you posted, the setup is slightly different. Instead of using <Redirect from='x' to='y'/> they are conditionally rendering a <Route path='x'><Redirect to='y'/></Route> (they’re actually passing an object to <Redirect>, but the docs say that both are ok and I’ve had the same results regardless.
Anyway - ignoring the setup in my project for now and focussing on StackBlitz, assuming that <Redirect from='x' to='y'/> is valid syntax, it seems pretty clear to me that there’s a bug. Now, which project that’s in I have no idea. Is it React Router? Is it in @ionic/react? I’m not even sure if the latter’s source is developed publically.
What do you think? Am I just plain wrong or does the above sequence of steps demonstrate a bug?
Thanks again for your help.
DS
still not really understanding what you are doing and why… but changing
<Redirect exact from='/page/Counter' to='/page/Login'/>
to
<Route path="/page/Counter">
<Redirect to="/page/Home" />
</Route>
appears to resolve your concern
Thanks Aaron, yes it does.
This is the pattern I’m using in my main project.
It works the first time I render the routes but then, if I log out and log back in it’s broken. It might be soemthing I’m doing wrong with React - perhaps not properly re-rendering the list of routes on a prop change or something.
Anyway - this is only week 3 for me with React. I’ll push on, learn some more then revisit it.
Thanks for your help!