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?
CodePudding user response:
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/" />}
CodePudding user response:
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/')