Navigating From One local Host to another in react js

Question

How can i navigate from one localHost:3000 to localHost:3001 in react Js currently my auth is running in localHost:3000 and i want to navigate it to localHost:3001 when login successful

my current implementation is like {agency && <Navigate to={"http://localhost:3001/"} replace />}

but it navigate me to http://localhost:3000/Login/localhost:3001/

but i want http://localhost:3001

Anyone?

Answer 1

react-router-dom only handles internal navigation actions, i.e. it can only link to and route within the React application. "http://localhost:3001/" is interpreted as an internal path and is appended to the current path.

If you need to navigate to an external (to the app) URL you should use raw anchor (<a />) tags or issue an imperative redirect via the window.location object.

Create a new navigation component to handle issuing the side-effect of external redirect in an useEffect hook.

Example:

const NavigateExternal = ({ to }) => {
  useEffect(() => {
    window.location.href = to;
  }, []);
  return null;
};

...

{agency && <NavigateExternal to="http://localhost:3001/" />}

Answer 2

You'd need to use

window.location.href = 'http://localhost:3001/'

Or using good practices

const redirectToExternalResource = url => window.location.href = URL

redirectToExternalResource('http://localhost:3001/')