Search code examples
reactjsreact-routernavigation

Navigating From One local Host to another in react js

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?

Solution

  • 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/" />}