React及React-Router中替代window.location实现外部跳转的方案咨询

Hey there! Totally get where you're coming from—React Router is built for navigating within your single-page app, so its methods like useNavigate or history.push won't work for external URLs. But you don't have to stick with raw window.location.assign if you want a more React-aligned workflow. Here are some solid alternatives:

1. Use a Native <a> Tag (Simplest Option) #

This is the most straightforward approach, and React fully supports it. Just make sure to add security attributes to avoid vulnerabilities:

<a 
  href="https://external-site.com" 
  target="_blank" 
  rel="noopener noreferrer"
>
  Visit External Site
</a>

• target="_blank" opens the link in a new tab/window (omit this if you want to navigate away from your app in the same tab)
• rel="noopener noreferrer" prevents the external site from accessing your app's window object, fixing a common security issue.

2. Encapsulate External Navigation in a Custom Hook #

If you need to trigger redirects from buttons or other interactive elements (not just links), wrap the logic in a reusable hook. This lets you add extra behavior like logging or loading states:

import { useCallback } from 'react';

const useExternalRedirect = () => {
  const redirectToExternal = useCallback((url, openInNewTab = true) => {
    // Add any pre-redirect logic here (e.g., analytics tracking)
    console.log(`Redirecting to external URL: ${url}`);
    
    if (openInNewTab) {
      window.open(url, '_blank', 'noopener,noreferrer');
    } else {
      window.location.assign(url);
    }
  }, []);

  return redirectToExternal;
};

// Use it in your component
const MyButtonComponent = () => {
  const redirectToExternal = useExternalRedirect();

  return (
    <button onClick={() => redirectToExternal('https://external-site.com')}>
      Go to External Site
    </button>
  );
};

This keeps your component code clean and makes the redirect logic reusable across your app.

3. Create a Redirect Component for React Router #

If you need to trigger an external redirect from a route (e.g., when a user visits /go-to-external), build a simple component that handles the redirect:

import { useEffect } from 'react';

const ExternalRedirect = ({ to }) => {
  useEffect(() => {
    window.location.assign(to);
  }, [to]);

  // Show a loading state while redirecting
  return <div>Redirecting to external site...</div>;
};

// Add it to your route configuration
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      {/* Your app routes */}
      <Route path="/" element={<Home />} />
      {/* External redirect route */}
      <Route path="/external-link" element={<ExternalRedirect to="https://external-site.com" />} />
    </Routes>
  );
}

This integrates seamlessly with your existing React Router setup for cases where a route should point outside your app.

Quick Note #

At the end of the day, all external redirects rely on browser APIs like window.open or window.location—React Router doesn't handle external URLs by design. But wrapping these APIs in React components or hooks makes them feel more natural to use in your React codebase.

内容的提问来源于stack exchange，提问作者Aniruddh Agarwal