CODEWITHSUNDEEP
htmlreactjstypescriptreact-router
Ritzy Dev
Ritzy Dev

Reputation: 515

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

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>

Upvotes: 1

Views: 836

Answers (2)

iamredseal
iamredseal

Reputation: 41

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;
  }}
/>

Upvotes: 0

Drew Reese
Drew Reese

Reputation: 202605

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>

Edit react-5-make-route-navigate-to-an-external-link

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>

Upvotes: 1

Related Questions