React Router Dom v6 Redirect issue

Question

I have writter "replace" but it is still not working.

<Route 
     path="/"
     element={<Navigate to="https://account-d.docusign.com/oauth/auth?response_type=code&scope=signature&client_id=**********&redirect_uri=http://localhost:3000/login" replace />}  />

Answer 1

It's not working because you're navigating to an external route. You can make a similar component, e.g. NavigateExernal as illustrated below. Within that component, just update window.location.href inside useEffect() or componentDidMount if you're component is a class.

// use NavigateExternal instead of Navigate
<Route path="enter" element={<NavigateExternal to="https://www.google.com" />} />


// NavigateExternal.tsx
import { useEffect } from "react"

const NavigateExternal = ({ to }: { to: string }) => {
  useEffect(() => { window.location.href = to })
  return null
}

export default NavigateExternal