[Bugfix] Fixing Issue With Scrolling Client And Vendor Show Page #2362
Conversation
|
@turbo124 From the discussion on Slack, the way of loading tabs on the Client and Vendor overview pages has been changed, so we will no longer have the "reload" effect. Let me know your thoughts. |
| @@ -14,7 +14,24 @@ import { useLocation } from 'react-router'; | |||
| export function ScrollToTop(props: any) { | |||
| const location = useLocation(); | |||
|
|
|||
| const pathSegments = location.pathname.split('/'); | |||
| const id = pathSegments?.[2] || ''; | |||
There was a problem hiding this comment.
I wonder if you can extract id from the useParams?
There was a problem hiding this comment.
@beganovich I understand your wondering, but the reason for not having the possibility to extract it from useParams is because ScrollToTop is the parent of the whole <App />, which includes Router as well. Outside of the router concept, react-router-dom is not able to get parameters from the URL, and that is the only reason for it. If we want to achieve getting it with useParams, we would need to apply the ScrollToTop component to each route in the app. However, I think this approach, while not perfect, is not too bad since we just need that one check to see if something is included in the URL. Let me know your thoughts.
There was a problem hiding this comment.
Just make sure this works both on hash and regular (browser) route then, please.
There was a problem hiding this comment.
@beganovich I just tested it, the same logic works for both "hash" and "browser" routers. I just did a tiny cleanup when checking if it is a client/vendor show page, but the logic with the ID remains the same.
@beganovich @turbo124 The PR fixes the scrolling issue on client and vendor show pages when switching between tabs. Let me know your thoughts.