React-Router External Link

Question

Since I use an agent router to handle my routes in the response application, I am 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 find exactly zero help, avoiding writing it in plain JS when loading index.html with something like:

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

Answer 1

In fact, I created my own component. <Redirect> It takes information from the react-router element, so I can save it on my routes. For instance:

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

Here is my component - any 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; 

EDIT - NOTE: This is with react-router: 3.0.5 , it is not so easy in 4.x

Answer 2

Here is one line to use React Router to redirect to an external link:

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

It uses the concept of React pure components to reduce the component code to a single function, which, instead of displaying something, redirects the browser to an external URL.

Works like on React Router 3 and 4.

Answer 3

There is no need to use the <Link /> component from the reacting router.

If you want to go to an external link, use the anchor tag.

 <a target="_blank" href="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies">Policies</a> 

Answer 4

It does not require a router request. This action can be performed initially and is provided by the browser.

just use window.location

 class RedirectPage extends React.Component { componentDidMount(){ window.location.replace('http://www.google.com') } } 

Answer 5

Using some of the information here, I came up with the following component that you can use in your route announcements. It is compatible with React Router v4.

It uses typewritten text, but should be fairly simple to convert to native javascript:

 interface Props { exact?: boolean; link: string; path: string; sensitive?: boolean; strict?: boolean; } const ExternalRedirect: React.FC<Props> = (props: Props) => { const { link, ...routeProps } = props; return ( <Route {...routeProps} render={() => { window.location.replace(props.link); return null; }} /> ); }; 

And use with:

 <ExternalRedirect exact={true} path={'/privacy-policy'} link={'https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies'} /> 

Answer 6

I do not think React-Router provides this support. documentation mentions

A <Redirect> sets a redirect to a different route in the application to preserve old URLs.

You can try using something like React-Redirect instead

Answer 7

FOR V3, although it can work for V4. Starting from a Relic response, I needed to do a little more, for example, handle local development where "http" is not in the URL. I am also redirecting to another application on the same server.

Added to router file:

 import RedirectOnServer from './components/RedirectOnServer'; <Route path="/somelocalpath" component={RedirectOnServer} target="/someexternaltargetstring like cnn.com" /> 

And 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 ( <div> <br /> <span>Redirecting to {this.target}</span> </div> ); } } export default RedirectOnServer; 

Answer 8

To extend Alan’s response, you can create a <Route/> that redirects all <Link/> with "to" attributes containing "http:" or "https:" to the correct external resource.

The following is a working example of this, which can be placed directly in your <Router> .

 <Route path={['/http:', '/https:']} component={props => { window.location.replace(props.location.pathname.substr(1)) // substr(1) removes the preceding '/' return null }}/> 

Answer 9

Using React with Typcript, you get an error, since the function should return a reaction element, not void . So I did it this way using the Route rendering method (and using React router v4):

 redirectToHomePage = (): null => { window.location.reload(); return null; }; <Route exact path={'/'} render={this.redirectToHomePage} /> 

Instead, you can use window.location.assign() , window.location.replace() etc.

Answer 10

If you are using server side disassembly, you can use StaticRouter . Use context as props , and then add the <Redirect path="/somewhere" /> component to your application. The idea is that every time a response-router matches a redirect component, it adds something to the context that you passed to the static router to let you know that your path matches the redirect component. Now that you know that you are in a redirect, you just need to check if this is the redirect you are looking for. then just redirect through the server. ctx.redirect('https://example/com') .

Answer 11

I managed to achieve redirection in reaction-router-home using the following

 <Route exact path="/" component={() => <Redirect to={{ pathname: '/YourRoute' }} />} /> 

In my case, I was looking for a way to redirect users whenever they visit the root URL http://myapp.com somewhere else in the application http://myapp.com/newplace . so the above helped.