Redirect to external link from React app using react-router-dom

Question

What I want is when entering the '/' path, it renders the homepage (App.js), and I create a special link to redirect to an external page

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import App from './App';

const Home = () => { 
    return (
        <Routes>
            <Route path="/" element={<App />} />
            <Route path="/g" element={() => window.location.replace('https://google.com')} />
        </Routes>
    )
}

export default Home;

Result:

http://localhost:3004/ doesn't load the homepage and shows a blank page instead
http://localhost:3004/g doesn't redirect, shows a blank page as above

So I tried to ditch the router and render the App directly, it's still working

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import App from './App';

const Home = () => { 
    return (
        <App />
    )
}

export default Home;

What did I do wrong?

Richard Hpa · Accepted Answer · 2022-07-11 20:48:35Z

2

The issue is that your Route still needs to have a JSX element as the element prop. So just make a function that has your window.location.replace on it.

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="g" element={<Redirect />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  return 'Home';
}
function Redirect() {
  window.location.replace('https://google.com');
}

answered Jul 11, 2022 at 20:48

Richard Hpa

2,90717 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Redirect to external link from React app using react-router-dom

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related