How to Redirect to External Resources with React Router?

Redirecting to External Resources with React Router

When utilizing React Router for route management in React applications, the question arises: how can we redirect to an external resource? This is particularly useful when requiring users to access external content, such as privacy policies or support articles.

Rather than resorting to plain JavaScript in index.html, React Router offers a convenient solution. By leveraging its component prop, we can create a specialized component responsible for redirecting to the desired external URL.

The following code snippet serves as an effective one-liner for this purpose:

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

This approach utilizes the inherent concept of pure components in React. Instead of rendering any content, this specialized component redirects the browser to the specified external URL.

It's worth noting that this solution is compatible with both React Router 3 and 4, providing a comprehensive solution for external link redirection within your React application.

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