React-Router External link

Question

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 JS 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

User · Answer

I don t think React-Router provides this support  The documentation mentions     A  lt  Redirect   sets up a redirect to another route in your application to maintain old URLs    You could try using something like React-Redirect instead

User · Answer

I actually ended up building my own Component   lt Redirect gt  It takes info from the react-router element so I can keep it in my routes  Such as    lt Route   path   privacy-policy    component   Redirect     loc  https   meetflo zendesk com hc en-us articles 230425728-Privacy-Policies      gt    Here is my component incase-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   lt section gt Redirecting    lt  section gt           export default Redirect    EDIT -- NOTE  This is with react-router  3 0 5  it is not so simple in 4 x

User · Answer

Using React with Typescript you get an error as the function must return a react element  not void  So I did it this way using the Route render method  and using React router v4    redirectToHomePage       null   gt        window location reload        return null            lt Route exact path       render  this redirectToHomePage    gt    Where you could instead also use window location assign    window location replace   etc

User · Answer

With Link component of react-router you can do that  In the  to  prop you can specify 3 types of data    a string  A string representation of the Link location  created by concatenating the location   s pathname  search  and hash properties  an object  An object that can have any of the following properties    pathname  A string representing the path to link to  search  A string representation of query parameters  hash  A hash to put in the URL  e g   a-hash  state  State to persist to the location   a function  A function to which current location is passed as an argument and which should return location representation as a string or as an object   For your example  external link    https   example zendesk com hc en-us articles 123456789-Privacy-Policies  You can do the following    lt Link to    pathname   https   example zendesk com hc en-us articles 123456789-Privacy-Policies     target   blank    gt    You can also pass props you   d like to be on the  such as a title  id  className  etc

User · Answer

Here s a one-liner for using React Router to redirect to an external link    lt Route path   privacy-policy  component       gt          window location href    https   example com 1234         return null      gt    It uses React pure component concept to reduce the component s code to a single function that  instead of rendering anything  redirects browser to an external URL   Works both on React Router 3 and 4

User · Answer

Using some of the info here  I came up with the following component which you can use within your route declarations  It s compatible with React Router v4   It s using typescript  but should be fairly straight-forward to convert to native javascript   interface Props     exact   boolean    link  string    path  string    sensitive   boolean    strict   boolean     const ExternalRedirect  React FC lt Props gt     props  Props    gt      const   link     routeProps     props     return        lt Route           routeProps        render       gt            window location replace props link           return null                 gt            And use with    lt ExternalRedirect   exact  true    path    privacy-policy     link   https   example zendesk com hc en-us articles 123456789-Privacy-Policies     gt

User · Answer

I was able to achieve a redirect in react-router-dom using the following   lt Route exact path     component       gt   lt Redirect to    pathname    YourRoute       gt     gt    For my case  I was looking for a way to redirect users whenever they visit the root URL http   myapp com to somewhere else within the app http   myapp com newplace  so the above helped

User · Answer

To expand on Alan s answer  you can create a  lt Route  gt  that redirects all  lt Link  gt  s with  to  attributes containing  http   or  https   to the correct external resource   Below is a working example of this  which can be placed directly into your  lt Router gt     lt Route path     http      https     component  props   gt      window location replace props location pathname substr 1      substr 1  removes the preceding       return null     gt

User · Answer

FOR V3  although it may work for V4  Going off of Eric s answer  I needed to do a little more  like handle local development where  http  is not present on the url  I m also redirecting to another application on the same server   Added to router file   import RedirectOnServer from    components RedirectOnServer            lt Route path   somelocalpath            component  RedirectOnServer            target   someexternaltargetstring like cnn com            gt    And the Component   import React    Component   from  react    export class RedirectOnServer extends Component      constructor props        super          if the prefix is http or https  we add nothing     let prefix   window location host startsWith  http           http            using host here  as I m redirecting to another location on the same host     this target   prefix   window location host   props route target        componentDidMount         window location replace this target         render        return          lt div gt           lt br   gt           lt span gt Redirecting to  this target  lt  span gt         lt  div gt                export default RedirectOnServer

User · Answer

I m facing same issue  Solved it using by http    or https    in react js  Like as   lt a target  quot  blank quot  href  quot http   www example com  quot  title  quot example quot  gt See detail lt  a gt

User · Answer

I had luck with this      lt Route     path   example      component       gt        global window  amp  amp   global window location href    https   example com        return null           gt

User · Answer

You can now link to an external site using React Link by providing an object to to with the pathname key   lt Link to     pathname     example zendesk com hc en-us articles 123456789-Privacy-Policies       gt  If you find that you need to use JS to generate the link in a callback  you can use window location replace   or window location assign    Over using window location replace    as other good answers suggest  try using window location assign    window location replace   will replace the location history without preserving the current page  window location assign   will transition to the url specified  but will save the previous page in the browser history  allowing proper back-button functionality  https   developer mozilla org en-US docs Web API Location replace https   developer mozilla org en-US docs Web API Location assign Also  if you are using a window location   url method as mentioned in other answers  I highly suggest switching to window location href   url  There is a heavy argument about it  where many users seem to adamantly want to revert the newer object type window location to its original implementation as string merely because they can  and they egregiously attack anyone who says otherwise   but you could theoretically interrupt other library functionality accessing the window location object  Check out this convo  It s terrible  Javascript  Setting location href versus location

User · Answer

If you are using server side rending  you can use StaticRouter  With your context as props and then adding  lt Redirect path   somewhere    gt  component in your app  The idea is everytime react-router matches a redirect component it will add something into the context you passed into the static router to let you know your path matches a redirect component  now that you know you hit a redirect you just need to check if thats the redirect you are looking for  then just redirect through the server  ctx redirect  https   example com

User · Answer

It doesn t need to request react router  This action can be done natively and it is provided by the browser  just use window location class RedirectPage extends React Component     componentDidMount        window location replace  https   www google com          also  if you want to open it in a new tab  window open  https   www google com     blank

User · Answer

There is no need to use  lt Link   gt  component from react-router   If you want to go to external link use an anchor tag    lt a target   blank  href  https   meetflo zendesk com hc en-us articles 230425728-Privacy-Policies  gt Policies lt  a gt

[javascript] React-Router External link

Examples related to javascript

Examples related to reactjs

Examples related to redirect

Examples related to react-router

Examples related to react-router-redux