How to refresh the page quickly, we often write complex code in the router, actually do not need to modify the router, as long as we can switch to a page that has no request, and then return, so the effect is the same, the code is as follows

const reload = () => {
    history.push('/login')
    history.goBack()
}
Copy the code

But there are two problems

  • It breaks the actions of the browser’s built-in forward and back buttons, a legacy of push, which can lead to user confusion.
  • Although the page is not reloaded, but the data is empty, it takes time to request again, the interface request time is usually within half a second, about 100 or 200ms, although very fast, but the eyes can still feel the refresh moment (this is the most critical)

Based on the second question, we can conclude that rendering again cannot have a blank period with no data, in which case either the data request is extremely fast (on local hard disk, memory, etc.) or the previous data is not cleared at all. There are two solutions

  • Data requests are particularly fast, I wrote an Axios-based request control frequency middleware point I view, this is one way
  • Just re-execute the request.

As follows, the request is consolidated into an init function

This init can then be used as a reload function, called, for example, in a child component, and passed to be called.

This time seamless update, great. This solves the first problem, because there is no routing at all.

(Don’t blame me for writing an article this weekend.)

— 完 —