使用 react-router-dom 从 React 应用程序重定向到外部链接

Question

我想要的是在输入'/'路径时，它会呈现主页（ App.js ），然后我创建一个特殊链接以重定向到外部页面

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;

结果：

• http://localhost:3004/不加载主页而是显示一个空白页面
• http://localhost:3004/g不重定向，显示如上的空白页面

所以我尝试放弃路由器并直接渲染应用程序，它仍然可以工作

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

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

export default Home;

我做错了什么？

Answer 1

问题是您的Route仍然需要有一个 JSX 元素作为元素道具。 因此，只需创建一个包含window.location.replace的函数即可。

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');
}