Question 34637 in React native Question posted in
The official React Native documentation can be found here.

React router – useHistory / useNavigate vs window.history.back() – React native

I have a navigate back button and while checking for returning back I found two ways:

  1. The native way:
window.history.back()

or

window.history.go(-1)
  1. The react router way:
export const BackButton: FC = () => {
  const navigate = useNavigate();

  return (
      <button
        onClick={() => navigate(-1)}>
          Back
      </button>
  );
}

or for v5

export const BackButton: FC = () => {
  const { goBack } = useHistory();

  return (
      <button
        onClick={goBack}>
          Back
      </button>
  );
}

So I am wondering what is the differences between these ways.

I am guessing (didn’t check the source code) that under the hood react router use the native way and do a bit more things, and if I am using react router then I should use the react router way but I still would like to understand the differences.

Thanks!

Tags:

2

Answers


  1. 0

    In react window.history.back() change the URL and load page while useNavigate or useHistory just re-render components that’s why it is better to use it.

    Login or Signup to reply.
  2. 0

    They all map back to the window.history object. goBack also is implemented as go(-1). The main difference between using the window.history object and using the react-router history object (v5) or navigate function (v6) is that using window.history will effect navigation changes outside of React and react-router whereas using history or navigate will be correctly handled internally by react-router to update its internal routing context prior to effecting the change with the Browser.

    Think of the window.history "way" as a sort of "global mutation" that React wouldn’t be aware of or be able to handle well.

    Using window.history will reload the page whereas using react-router will only update the URL in the address bar and render/rerender routes/etc internally within the app, i.e. there is no page reload and the app remains mounted and running the entire time.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search