Support for navigate('https://absolute-url') in react-router v7

[remorses]

currently doing this in react router and remix will assume https://absolute-url is a pathname

Instead it should assume it is an absolute url if the string starts with https://

const navigate = useNavigate()
navigate('https://absolute-url')

This is very useful if you have a an url to the current host and want to navigate to it without reloading the page. Currently you will have to do the following which will cause the page to reload, redownloading and reexecuting javascript

// bad because the current host is https://absolute-url anyway
window.location.href = 'https://absolute-url'

[H-Hp]

You're absolutely right. The current behavior of react-router and Remix is to assume that the argument passed to the navigate function is a relative path, even if it starts with https://. This can cause issues when you want to navigate to an absolute URL within the same domain without reloading the page.

This behavior is intentional and is documented in the React Router documentation:

The navigate function accepts a URL path string, or a number (which will be used to navigate that many pages forward or backward in the browser history stack).

However, there's a way to handle this scenario elegantly without resorting to window.location.href, which would cause a full page reload.

You can leverage the fact that the navigate function also accepts an options object as the second argument. Within this options object, you can specify the replace option to control whether the navigation should push a new entry onto the history stack or replace the current entry.

Here's how you can use it:

import { useNavigate } from 'react-router-dom';

const MyComponent = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    const absoluteUrl = 'https://absolute-url';
    navigate(absoluteUrl, { replace: true });
  };

  return <button onClick={handleClick}>Navigate to Absolute URL</button>;
};

By setting replace: true in the options object, React Router will replace the current history entry with the new URL, effectively changing the current location without causing a full page reload.

This approach works seamlessly with both React Router and Remix, as they share the same underlying navigation logic.

Note that this approach assumes that the absolute URL you're navigating to is within the same domain as your application. If you need to navigate to a different domain, you'll need to use window.location.href or open a new window/tab.

Also, keep in mind that replacing the current history entry might not be desirable in all cases, as it can affect the user's ability to navigate back and forth in the browser history. In those cases, you can omit the replace option, and React Router will push a new entry onto the history stack, preserving the user's browsing history.

[remorses]

Thank you I didn’t know about the replace trick, but in this case I don’t want that behavior. I just want to pass an absolute url to navigate without having to extract the path manually. Now it’s the right time to do these kind of breaking changes

[nguyentienminh07102004]

Thank you!!!! Very nice!