How to Implement External Redirects in React-Router?

External Redirects in React-Router

When handling routes with React Router, it may be necessary to redirect to external resources. This guide addresses the query of how to achieve such a redirection.

Consider a scenario where a user accesses a specific URL on the application, such as "example.com/privacy-policy." The goal is to redirect them to an external domain, say "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies."

To avoid resorting to plain JavaScript, React Router provides a solution with the following one-liner:

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

This code leverages React's pure component concept, encapsulating the component's behavior into a single function. Instead of rendering any UI, this function redirects the user's browser to the specified external URL.

Notably, this approach is compatible with both React Router versions 3 and 4. By utilizing this approach, developers can elegantly redirect users to external resources while maintaining the integrity of React's declarative programming model.

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