I’m having real trouble since upgrading to F7 v6 React… Routes do not seem to work at all the way they did in v5.
If I click a link to go to a URL (e.g. ‘/settings/’) it loads the page defined in my routes.js, but the back link simply does not work. I cannot get back to the original page.
In my React Components view in DevTools, I can see that the original page, AND the new page are loaded as components in the main view, but they both have different routers…
I can’t work out what I’m doing wrong… From the documentation, routing doesn’t appear to have changed that much that I need to rewrite the way I’m routing pages…
Any ideas?
For context, this is the link definition in my menu panel:
<ListItem link='/settings/' panelClose title={t('SettingsTitle')} view='#view-main' />
And my view is defined in my main app component as:
<View id='view-main' main masterDetailBreakpoint={768} url='/'>
<div className='page-detail-placeholder'>
Select an item to view details
</div>
</View>
This is getting strange… I’ve clicked a button which changed a prop in a sub-component of “DriverDashboard”, and it’s loaded the whole “Dashboard” component again as another component, under a different “Context.Provider”!
It is by design, each page has its own router context in react. But issue with navigation is weird. Would be good to see some example, maybe some GitHub repo with minimal issue reproduction?
OK, thank you - I’ll set about seeing if I can get a minimal reproduction together for you.
1 Like
Right, bit of an update:
I’ve got two apps that are very similar in structure, and comparing the two with the fresh app I created to test a reproduction, I found some issues which I have now fixed, and this has fixed the original routing issues above… kind of!
This has all come about because I’m struggling to find a way to show a different component from the root of my app based on whether the user is logged in or not.
In v5, I had a root component in app.jsx which tested if the user was logged in and rendered either the login page, or the main app content. This has not worked correctly since updating to v6. I think I’ll create a fresh question for that issue though, as it’s not strictly connected to this issue.
I’ll mark this as resolved for now. Thank you, and sorry for the confusion.
1 Like
OK, no, this isn’t fixed unfortunately.
I have the following in my root component:
return (
// eslint-disable-next-line react/jsx-props-no-spreading
<App {...f7params}>
<SWRConfig value={swrConfig}>
{isAuthenticated
? <>
<View id='view-main' main masterDetailBreakpoint={768}>
<div className='page-detail-placeholder'>
Select an item to view details
</div>
</View>
{/* Left Panel View */}
<Panel backdrop left>
<View id='menu-panel' url='/menu/' />
</Panel>
</>
: <View id='view-main' main>
<LoginPage initialPage />
</View>}
</SWRConfig>
</App>
)
isAuthenticated is taken from a React.Context.
The login component contains code which sets this property to true on successful login.
When this property is set to true, the view is correctly set to show my main app content (via a URL '/' defined in my routes.js file). Clicking a link to go to another page (e.g. '/settings/) works, but then the back link on that page doesn’t work. Nothing happens.
I can try and extract this out to a separate example… But is there anything here that strikes anyone as wrong? This was working as expected in F7 v5.
If it is set to true originally, does it work correctly? Also try to key the views to mark them as separate components:
<App {...f7params}>
<SWRConfig value={swrConfig}>
{isAuthenticated
? <>
<View key="view-logged-in" id='view-main' main masterDetailBreakpoint={768}>
<div className='page-detail-placeholder'>
Select an item to view details
</div>
</View>
{/* Left Panel View */}
<Panel backdrop left>
<View id='menu-panel' url='/menu/' />
</Panel>
</>
: <View key="view-auth" id='view-main' main>
<LoginPage initialPage />
</View>}
</SWRConfig>
Thanks for looking at this.
I’ve tried setting key on the views, and I can see this in the DevTools Components list, but it doesn’t affect the back link working.
Setting isAuthenticated to true and reloading the app (so that it’s set to true on first load) also doesn’t fix the issue. Back links still do not work unfortunately.
Just noticed that if I go to a further page on top of the first (e.g. Root -> First Page -> Further Page), back links start working, all the way back to the root page.
However, this results in the following in my Components view:
That is weird. Would be really great to see live example (or some minimal repo) with the issue
Still working on this… I reverted to an earlier version of my code (I’d been changing things around so much that I thought going back and having a fresh go might be worthwhile), and I now have forward links and back links working - although I’m still seeing odd behaviour.
I’m not sure if I can get a minimal repro… My app code is quite extensive, and teasing out the pure code to replicate this issue will be hard I think. I can look into this, but I’m wondering if I can just give you access to my repo on GitHub so you can take a look at the live code? Do you think this would be worthwhile?
Yes, you can give me access to your GitHub repo and I will take a look there