How can I detect page movements in ReactJs - reactjs

this is probably the second code-related question I will be asking on this platform.
I am working with React Js.
I imported useLocation hook from 'react-router-dom"
and defined location as follows
location = useLocation()
How can I detect the current page and
the next page I navigated to when I make a click action?
<location.pathname> detects the current page pathname. For example,
Assuming I am on page 1 and I navigate to page 2 when I make a click action,
While on page 2, how can I detect that I navigated from page 1 to page 2?

Related

When i navigate to another screen. It's showing me end of the page. but i want to show page to top with react router v6

I have multiple user cards when I click on the specific user it navigates to the user detail. but on the next page, it's showing half of the page or the end of the page. Not showing the top of the page. It's problem in react-router v6.

ReactiveSearch (Web): Pagination gets reset once returning to same page

I am working on ReactiveSearch, in which I am using URLParams to maintain search selections of user through route changes.
When on any page other than first, after refreshing browser, user gets on that page,
but once user change the page and visit same page again, by click on pagination, it redirects user to first page rather than that page.
On Sandbox here, if you refresh page after navigating to Page 3, and do navigation by going to Page 2 and again to Page 3, you will be redirected to Page 1.
Is there any work around I can fix this till issue gets fixed?
Thanks.
They have updated their repo now and above issue is resolved.

Save page after redirect

So I'm using most recent react-router and i have two pages. On the first one I select id and after pressing the button I get redirected to '/user/:id' endpoint. How can I store the state of the previous page. For example I press back button in my browser and I want to get back to the page with the user id selected in the form. Can I do it without using redux? Is there something for that inside react router?

How to achieve system page state cache (when I redirect to another page and return to this page again, all data is reserved)

In Angularjs, it will refresh the page each time I come into a new page.
Now in Page1, I have already opened a modal dialog and written some texts in it, then I click a button it redirect to Page2.
There's a link now in the header like : Page1 -> Page2.
When I click Page1 of the link, it will return to Page1 with all former data kept(modal is opening, data is still there...)
How to accomplish system page state cache in angularJS?
You need to store the page state somewhere. Most sites are using SessionStorage or LocalStorage.
Everytime you change your page state you have to update your storage.
On a page reload you need to check your storage whether there is any state saved and load it before any other interaction.
The easyiest way may be a angular plugin like https://github.com/gsklee/ngStorage or https://github.com/grevory/angular-local-storage

Routing to same page with anchors

I'm new to react router and currently implementing a page with navigation.
The top part is navigation followed by content part.
Currently when someone clicks on localhost:8080/page it renders a component in the content part.
On click on one of the nav items page redirects to localhost:8080/page#my-anchor also the content below renders another component.
When clicking back button, the URL changes to localhost:8080/page but the content doesn't get updated.
How to handle the update of content with browser back & forward buttons?

Resources