I'm developing with react-router-dom. Now, I'm creating a page where users can enter information in a form. What I want to do is prevent the user from losing the information they enter if they accidentally return to the previous page.
I first found a way to stop the browser back in the article below. It seems that the moment you return to the previous page, you immediately return to the original page, effectively preventing you from returning to the previous page.
React.useEffect (() => {
return () => {
props.history.goForward ();
}
}, []);
React Router Dom v4 handle browser back button
However, in this case, the previous page will be returned once, so all the current page information (state) will be reset. Is there a solution to prevent the state from resetting?
Or is there a smarter way to solve this?
Below, I have prepared an image for explanation.
You have several ways to approach your answer, but all of them have 1 concept, and that is Higher-order-component, so in this case, you have to have a top-level component (Higher than react-router), so when the location has changed, you don't lose the information in the state. in another word, you have to have a general state.
So how you can reach this goal? you have several ways and I'm here to help you use them.
redux - https://redux.js.org/.
context - https://reactjs.org/docs/context.html.
react state - https://reactjs.org/docs/higher-order-components.html.
localStorage or sessionStorage - https://www.robinwieruch.de/local-storage-react.
...
these are just some examples of what you can do to prevent losing state when the browser location has changed.
Related
I'm working on a react project where I created a component using <Promp/> from react-router to implement a confirm dialog that shows up when user attempts to leave the route without saving current changes:
The component works properly when I try to leave the current route, but I also want to display the dialog when user clicks a button meant to discard the changes intentionally. Since modal only displays based on a route change, a workaround that I could think of is to call history.push when button clicked:
const history = useHistory();
const { pathname } = useLocation();
const onCancel = () => {
history.push(pathname);
};
that it pushes the same route and this way changes are discarded and user stays on the same page as if nothing happens, but now the problem with this workaround is that user won't be able to go back to previous route because history stack is getting filled with the same location, so in order to solve this I tried to use history.replace which is meant to replace the top of the stack instead of pushing a new element, but it's not working this way and is acting like history.push adding new elements with the same location.
Is this bug or am I missing something? what could be a workaround for this?
Any suggestion is welcome.
Seems to me that you want to reload, i.e. re-render, the page. For that, you can use history.go(0).
Take a look at this: How do I reload a page with react-router?
I would like to know what is the best way to refresh the page after typing.
For example, I press a button that modifies the name of a product, how can I do that from the moment I validate my modification, the changes appear immediately, without having to manually refresh the browser page.
I saw some example with react-router, doing a redirect or using 'history.push', I also saw with the 'window.location.reload (false)' but it doesn't feel right because you can 'see' that the page refresh (yes you don't manually refresh but ... maybe there is something better to do)
Well, the best way is to not refresh the page at all.
Specially if you are using React. Every piece of data that you display on your UI is supposed to be stored in some kind of state. Even if that data should somehow be validated asynchronously (I think this is your case), once done, you should trigger a state change that will cause the interested components to re-render and display the new information.
You can use useState hooks of react to view the changes without refreshing the window.
In every state change, which means the change of value on the given state, react automagically rerender to show the latest data.
const [productName, setProductName] = useState('');
cosnt handleButtonClick = (name) => setProductName(name)
return (
<>
Production Name: {productName} // Product name changes on every button click.
<button onClick={() => handlebuttonClick(dynamicallySendRequiredDataFromHere)}> Change product name </button>
<>
)
It all depends on your requirement actually.
If you want to reload the page to get something which can only be achieved by reloading then use
window.location.reload()
If you want to reload just to get the data then make the API call and connect your component with the state that gets the value after the API call
If you want to maintain the history stack the use
history.push()
If you dont want to maintain the history stack the use
history.replace()
Some fancy times when you want to set cookie or storage to your page but dont want to refresh current page you can use window.open with the origin and target
window.open(window.location.origin, '_blank')
can't we use window.history.back(); twice time in same web browser
Lets say I have use window.history.back() where it does store how to delete it from a browser
You may have moved on by now, but... as far as I know there's no way to delete a history entry (or state).
One option I've been looking into is to handle the history yourself in JavaScript and use the window.history object as a carrier of sorts.
Basically, when the page first loads you create your custom history object (we'll go with an array here, but use whatever makes sense for your situation), then do your initial pushState. I would pass your custom history object as the state object, as it may come in handy if you also need to handle users navigating away from your app and coming back later.
var myHistory = [];
function pageLoad() {
window.history.pushState(myHistory, "<name>", "<url>");
//Load page data.
}
Now when you navigate, you add to your own history object (or don't - the history is now in your hands!) and use replaceState to keep the browser out of the loop.
function nav_to_details() {
myHistory.push("page_im_on_now");
window.history.replaceState(myHistory, "<name>", "<url>");
//Load page data.
}
When the user navigates backwards, they'll be hitting your "base" state (your state object will be null) and you can handle the navigation according to your custom history object. Afterward, you do another pushState.
function on_popState() {
// Note that some browsers fire popState on initial load,
// so you should check your state object and handle things accordingly.
// (I did not do that in these examples!)
if (myHistory.length > 0) {
var pg = myHistory.pop();
window.history.pushState(myHistory, "<name>", "<url>");
//Load page data for "pg".
} else {
//No "history" - let them exit or keep them in the app.
}
}
The user will never be able to navigate forward using their browser buttons because they are always on the newest page.
From the browser's perspective, every time they go "back", they've immediately pushed forward again.
From the user's perspective, they're able to navigate backwards through the pages but not forward (basically simulating the smartphone "page stack" model).
From the developer's perspective, you now have a high level of control over how the user navigates through your application, while still allowing them to use the familiar navigation buttons on their browser. You can add/remove items from anywhere in the history chain as you please. If you use objects in your history array, you can track extra information about the pages as well (like field contents and whatnot).
You could also extend the idea to handle forward navigation. You would need 3 pages - a "back" handler page, a "forward" handler page, and a "rest" page in between them where the user will typically be. You would then need to traverse back and forth along your history object instead of simply pushing/popping the items
First, thank you for your patience and expertise. Without you, I'd be mopping floors. From Linus Torvalds to DHH to you-- Awesome.
So I have a question duplicate ( answered here-- Why calling setState method doesn't mutate the state immediately? )
I have a 42 radio group form that calls setState for each choice. The above solution says the calls are asynchronous and cause the components to reload. I don't [think I] need to do that. How would you store in memory-- session, cookie -- or something that doesn't cause a repaint until the user submits the form? Sorry if this is another duplicate. I'm slow that way.
Again, thanks.
Not "repainting" the page is not how react works. I am constantly "repainting" the screen as the user interacts with the page I work on.
You want to use setState because if the user keeps clicking around you want to be able to keep updating and tracking what they did, so each update doesn't overwrite. The asynchronous update is beneficial in that you get a copy of the state at the exact moment the user fired off the actions, which ensures you don't end up in a funky state if a user updates a few things at once.
This might be an "asynchronous" update but it feels like it happens immediately and triggers the components to update themselves with the new information (aka repainting)
I found a lot of questions about this on Stack Overflow, but they were all very specific about certain parts. I did find this question whose answers provide some nice references, but they don't actually explain how it all works, and their examples hardly do anything. I want to know more about how it all works together, and I want to use vanilla JavaScript.
(Also, many of the answers on other questions are years old.)
GETTING STARTED
First of all, you can remove the window part. Just history works fine. But before we get into how everything works together, we need to know what we can use.
Important Events
window.onload
This event fires whenever your webpage is loaded. There are two cases that will fire this event:
When your webpage is navigated to from another webpage. Note that I wrote webpage, not website. Moving between pages on the same site will trigger this event.
Just after your webpage is refreshed.
window.onpopstate
This event fires when you navigate between history states that you have set. Your browser automatically sets history states (to null) during normal browsing, but navigating to/from these states will not trigger this event.
window.onunload
This event fires whenever your webpage is unloaded. There are two cases that will fire this event:
When you navigate to another webpage from your webpage.
Just before your webpage is refreshed.
Important Objects
The history interface contains five functions (described below), two read-only objects (described here), and works a bit like a linked list. The two objects contained in each 'link' of the history object are:
length - This is the number of history states for the current browser window. It starts at 1.
state - This is a JavaScript object that can contain practically anything. It is null by default.
You can access them by calling history.length and history.state respectively, though history.state can only be used to get the current history state.
Important Functions
history.go(distance)
This function does the same thing as pressing the back or forward button in your browser, with the added functionality of being able to specify exactly how far you want to go. For example, history.go(3) has the same effect as would pushing your forward button three times, without actually loading the pages between your start and end locations. A negative value will likewise move you backwards through your history. history.go(0), history.go(), and even history.go(NaN) have the same effect as refreshing the page (this does not trigger the popstate event). If you cannot move forward/backward as far as specified, the function will do nothing.
history.back()
This function has the same functionality as the back button in your browser. It is equivalent to history.go(-1). If it cannot go back, the function will do nothing.
history.forward()
This function has the same functionality as the forward button in your browser. It is equivalent to history.go(1). If it cannot go forward, the function will do nothing.
history.replaceState(state, title[, location])
This function replaces the current history state. It takes three arguments, though the last one is optional. The arguments are:
state - This is the most important argument. The object you give to this argument will be saved to history.state for later retrieval. This is a deep copy, so if you later modify the original object it will not change the saved state. You could also set this to null, but if you aren't going to use it, there's not much point in using history at all.
title - The HTML Standard suggests that a string passed to this argument could be used by the browser in the user interface, but no browser currently does anything with it.
location - This argument allows you to change the URL relative to the current page. It cannot be used to change the URL to that of another website, but it can be used to change the URL to that of another page on your website. I would advise against this however, as the page is not actually reloaded even though the URL is of another page. Using back/forward will show the changed URL, but will not change the page, and will trigger popstate rather than load or unload. Refreshing the page after changing its URL will load the page specified by the URL rather than the page you were previously on. This functionality could be used to provide a link to your page in its current state, but I would recommend only changing the query string rather than the full URL. If this argument is not used, the URL will not change.
history.pushState(state, title[, location])
This function works the same as history.replaceState, except it puts the new state after the current state instead of replacing the current state. All history states that could have previously been accessed with forward are discarded, and the new state becomes the current state.
ASSEMBLING THE PIECES
The history interface is very useful for allowing your users to navigate through dynamically generated content from within their browser without having to reload the entire page, but you need to be mindful of all the possible things your users could do that could affect the history state.
First time navigating to your page
Should your users be greeted with a menu/list, some specific dynamically generated content, or maybe some random dynamically generated content?
Will your page display correctly without history, or even JavaScript?
Using back/forward to return to your page
Should your users see the same thing they saw their first time, or should they see the result of their visit reflected in the content? (A "Welcome Back" message might be a nice touch to some, but an unwanted distraction to others.)
Refreshing your page
Should you get a new page, return to the start page, or reload the same page? (Your users probably won't expect that last one if the URL hasn't changed.)
Using back/forward from a refreshed page
Should you get new content relative to the refreshed page, or reload the previously saved state?
Navigating away from your page
Do you need to save anything before leaving?
Returning to your page via a deep link
Do you have code in place to recognize and handle a deep link?
Note there is no way to delete a saved state (other than a specific case with pushState() mentioned above). You can only replace it with new content.
PUTTING IT ALL TOGETHER
Since this is starting to get a bit wordy, lets finish it off with some code.
// This function is called when the page is first loaded, when the page is refreshed,
// and when returning to the page from another page using back/forward.
// Navigating to a different page with history.pushState and then going back
// will not trigger this event as the page is not actually reloaded.
window.onload = function() {
// You can distinguish a page load from a reload by checking performance.navigation.type.
if (window.performance && window.PerformanceNavigation) {
let type = performance.navigation.type;
if (type == PerformanceNavigation.TYPE_NAVIGATE) {
// The page was loaded.
} else if (type == PerformanceNavigation.TYPE_RELOAD) {
// The page was reloaded.
} else if (type == PerformanceNavigation.TYPE_BACK_FORWARD) {
// The page was navigated to by going back or forward,
// though *not* from a history state you have set.
}
}
// Remember that the browser automatically sets the state to null on the
// first visit, so if you check for this and find it to be null, you know
// that the user hasn't been here yet.
if (history.state == null) {
// Do stuff on first load.
} else {
// Do stuff on refresh or on returning to this page from another page
// using back/forward. You may want to make the window.onpopstate function
// below a named function, and just call that function here.
}
// You can of course have code execute in all three cases. It would go here.
// You may also wish to set the history state at this time. This could go in the
// if..else statement above if you only want to replace the state in certain
// circumstances. One reason for setting the state right away would be if the user
// navigates to your page via a deep link.
let state = ...; // There might not be much to set at this point since the page was
// just loaded, but if your page gets random content, or time-
// dependent content, you may want to save something here so it can
// be retrieved again later.
let title = ...; // Since this isn't actually used by your browser yet, you can put
// anything you want here, though I would recommend setting it to
// null or to document.title for when browsers start actually doing
// something with it.
let URL = ...; // You probably don't want to change the URL just yet since the page
// has only just been loaded, in which case you shouldn't use this
// variable. One reason you might want to change the URL is if the
// user navigated to this page with a query string in the URL. After
// reading the query string, you can remove it by setting this
// variable to: location.origin + location.pathname
history.replaceState(state, title, URL); // Since the page has just been loaded, you
// don't want to push a new state; you should
// just replace the current state.
}
// This function is called when navigating between states that you have set.
// Since the purpose of `history` is to allow dynamic content changes without
// reloading the page (ie contacting the server), the code in this function
// should be fairly simple. Just things like replacing text content and images.
window.onpopstate = function() {
// Do things with history.state here.
}
// This function is called right before the page is refreshed, and right
// before leaving the page (not counting history.replaceState). This is
// your last chance to set the page's history state before leaving.
window.onunload = function() {
// Finalize the history state here.
}
Notice that I never called history.pushState anywhere. This is because history.pushState should not be called anywhere in these functions. It should be called by the function that actually changes the page in some way that you want your users to be able to use the back button to undo.
So in conclusion, a generic setup might work like this:
Check if (history.state == null) in the window.onload function.
If true, overwrite the history state with new information.
If false, use the history state to restore the page.
While the user is navigating the page, call history.pushState when important things happen that should be undoable with the back button.
If/When the user uses their back button and the popstate event is triggered, use the history state you set to return the page to its previous state.
Do likewise if/when the user then uses their forward button.
Use the unload event to finalize the history state before the user leaves the page.