How to Handle External Links with React Router?

Handling External Links in React-Router

React Router provides a comprehensive routing solution for React applications. While it's primarily designed for handling internal routing, it also offers the capability to redirect to external resources.

Redirecting to an External URL

The question presents a use case where a React-Router app needs to redirect from "/privacy-policy" to an external URL. To achieve this, React-Router allows you to create a route component that handles custom logic.

Here's a one-liner solution using React Router to redirect to an external link:

<Route path='/privacy-policy' component={() => {
    window.location.href = 'https://example.com/1234';
    return null;
}}/>

This pure component follows the React pure component concept, minimizing its code to a single function. Instead of rendering any UI, it uses the window.location.href property to redirect the browser to the external URL.

This approach works for both React Router 3 and 4. It's a concise and elegant solution that aligns with React Router's routing paradigm, ensuring a seamless user experience for external resource redirection.

The above is the detailed content of How to Handle External Links with React Router?. For more information, please follow other related articles on the PHP Chinese website!