React (5): Make route navigate to an external link

Question

I'm trying to make react navigate to an external link from a route. I don't feel like adding an restyling the header.

<Switch>
   <Route exact path='/'>
       <PageLayout>
           <LandingPage />
        </PageLayout>
   </Route>
   <Route exact path='/example'>
      <a href="www.example.com" />
   </Route>
</Switch>

I'm just looking for the simplest way to do this. I don't want to have to restyle the header.

Preferably it would open up a new page.

Edit I've also tried

<Route exact path='/example'>
 <Redirect to='https://www.example.com' />
</Route>

Does this answer your question? [How to redirect in React Router v6?](https://stackoverflow.com/questions/69868956/how-to-redirect-in-react-router-v6) — Abir Taheer, Sep 13 '22 at 02:06
No those are only redirects internally I need an external one — Ritzy Dev, Sep 13 '22 at 02:07
You might need to make a custom component that redirects on mount then — Abir Taheer, Sep 13 '22 at 02:09
Based on the docs, there doesn't seem to be any other way to do an external redirect besides just making a custom redirect component — Abir Taheer, Sep 13 '22 at 02:15
Do you really need to have the /example route ? If the only use of it is to redirect, i don't see why. — Maiky, Sep 13 '22 at 02:22

score 1 · Accepted Answer · answered Sep 13 '22 at 05:15

react-router-dom only deals with internal routing & navigation within a React app. If you want are trying to navigate/redirect to a URL that is external to your app from a matched route then I suggest using window.open and open in a new browser context, like a new window or tab. You can create a custom component to do this as a mounting effect.

Example:

import { useHistory } from 'react-router-dom';

const RedirectExternal = ({ to }) => {
  const history = useHistory();

  React.useEffect(() => {
    window.open(to, "_blank", "noreferrer");
    // use timeout to move back navigation to end of event queue
    setTimeout(history.goBack);
  }, [history, to]);

  return null;
};

Usage:

<Link to="/example">www.example.com</Link>

...

<Switch>
  <RedirectExternal from="/example" to="https://www.example.com" />
  <Route path="/">
    <PageLayout>
      <LandingPage />
    </PageLayout>
  </Route>
</Switch>

It might just be easier to link to the external page directly though.

<a href="https://www.example.com" rel="noreferrer" target="_blank">
  www.example.com
</a>

score 0 · Answer 2 · answered Sep 13 '22 at 22:02

Since you are using react-router-dom, you could do the following to achieve an external link in navigation.

<Route 
  path="/myPath"
  component={() => {
    if (window) {
      window.open(
        "https://www.google.com"
      );
    }
    return null;
  }}
/>

React (5): Make route navigate to an external link

2 Answers2