useNavigate vs window.location.href( or window.open)

Title

React Router navigate does not work with external URLs

Body

I am working on a project where clicking a lecture card should redirect the user to an external website such as Udemy or Inflearn.

At first, I tried using React Router’s useNavigate for this purpose, but I received the following error

No routes matched location "/courses/https://example.com"

This is the code I initially used:

import { useNavigate } from 'react-router' export default function LectureCard({ url_link }: Props) { const navigate = useNavigate() return ( <Button onClick={() => navigate(url_link)}> Go to Lecture </Button> ) }

After some testing, I fixed the issue by using window.open instead:

export default function LectureCard({ url_link }: Props) { return ( <Button aria-label="Navigate to lecture page" onClick={() => window.open(url_link, '_blank')} > Go to Lecture </Button> ) }

My question is:

Why does React Router’s navigate not work with external URLs? Why is window.open required in this case?

Any explanation or official documentation reference would be appreciated.