javascriptreactjshttp-redirectreact-routerreact-router-redux

React-Router External link


Since I'm using React Router to handle my routes in a React app, I'm curious if there is a way to redirect to an external resource.

Say someone hits:

example.com/privacy-policy

I would like it to redirect to:

example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies

I'm finding exactly zero help in avoiding writing it in plain JavaScript at my index.html loading with something like:

if (window.location.path === "privacy-policy"){
  window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"
}

Solution

  • I actually ended up building my own Component, <Redirect>. It takes information from the react-router element, so I can keep it in my routes. Such as:

    <Route
      path="/privacy-policy"
      component={ Redirect }
      loc="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies"
      />
    

    Here is my component in case anyone is curious:

    import React, { Component } from "react";
    
    export class Redirect extends Component {
      constructor( props ){
        super();
        this.state = { ...props };
      }
      componentWillMount(){
        window.location = this.state.route.loc;
      }
      render(){
        return (<section>Redirecting...</section>);
      }
    }
    
    export default Redirect;
    

    Note: This is with react-router: 3.0.5, it is not so simple in 4.x