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?
Related
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.
For example i have a page /profile on there, the user isshowed his profile picture. When the respected user clicks on it, it changes to /profile/avatar. But, i dont want to change the page but show a component which otherwise will not be shown in /profile. Think of it as when you click on another's avatar in twitter, it changes to /#elonmusk/pfp a modal shows the image but it doesnt unmount the previous page
How can i implement that?
I'm using React with react-router v4 for routing in a SPA app.
From within a list page, when user taps on an item, we navigate to detail url which renders detail component.
From here, if I click back, route transitions to list page but list page itself is reloaded. So its scroll position, selection of an item (which opened the details page) is lost.
I have been struggling to think about how to approach this problem. One way I was thinking is to build all pages to open as model on top of another so base page context is always there and when user navigates back, I can start to close the modals revealing previous page in its exact state.
Not sure if that is a right approach.
You could store the current scroll position locally, then scroll back to it when your list page component is mounted.
These are jQuery answers, but the principle is the same:
Restoring page scroll position with jQuery
How can I retain the scroll position of a scrollable area when pressing back button?
I'm having issues with an overlay panel.
The first page loads, you click a link... It pops up an overlay, the router fires a state and controller, and it populates the contents of the overlay.
There is a back button on the overlay, I trigger the overlay to close, call window.history.back() which sends the router off to load the new url (previous url) and it runs it through the router again but obviously refreshes the backing page in doing so.
So the end result is when you press a link, the overlay slides out beautifully, you then press back, the overlay slides back in, it then refreshes the page. You'd think then, why not just say in the controller, if there was an overlay and now there isn't do not change the view content... I can't, as the template stuff gets placed into the ui-view which is remove all my content.
So I need a way of changing the url without running through all of the controller stuff again so to avoid the template being inserted.
Any ideas on how to do this? Or examples of it working somewhere else.
i have an simple ion sidebar app with links inside the sidebar so when the user taps on the link in the sidebar a new view is loaded
but when the user taps the back button i want them to go to the home page form the view in which they where.
i accomplish this using
$state.go('state.name')
And it works fine but when i arrive at the home pace the sidebar "hamburger" icon is replaced with a back button to the view.
so is there a way to navigate to home without any history?
i am using all latest version of ionic
In Ionic 1.0.0-beta.14 you can do $ionicHistory.clearHistory()
More info