我能够在react-router-dom中使用以下方法实现重定向

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

对于我的案例，我正在寻找一种方法，每当用户访问根URL http://myapp.com时，将他们重定向到应用程序http://myapp.com/newplace中的其他地方。因此，上述方法有所帮助。

在React Route V6中，渲染道具被移除。它应该是一个重定向组件。

重定向网址：

const RedirectUrl = ({ url }) => {
  useEffect(() => {
    window.location.href = url;
  }, [url]);

  return <h5>Redirecting...</h5>;
};

路线:

<Routes>
   <Route path="/redirect" element={<RedirectUrl url="https://google.com" />} />
</Routes>

利用这里的一些信息，我提出了以下组件，您可以在路由声明中使用它。它与React Router v4兼容。

它使用的是TypeScript，但转换为原生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;
      }}
    />
  );
};

与…一起使用:

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

下面是使用React Router重定向到外部链接的一行代码:

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

它使用React纯组件概念，将组件代码减少为一个函数，而不是渲染任何东西，将浏览器重定向到外部URL。

它在React Router 3和4上都可以工作。

我自己解决了这个问题(在我的web应用程序中)，通过添加一个锚标记，而不是使用React路由器的任何东西，只是一个普通的锚标记和一个链接，正如你可以在图片截图中看到的，在一个React应用程序中使用锚标记而不使用React路由器

基本上，你不会将你的用户路由到你的应用程序中的另一个页面，所以你不能使用内部路由器，而是使用一个正常的锚。

虽然这是一个非反应本机解决方案，但您可以尝试。

我能够在react-router-dom中使用以下方法实现重定向

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

对于我的案例，我正在寻找一种方法，每当用户访问根URL http://myapp.com时，将他们重定向到应用程序http://myapp.com/newplace中的其他地方。因此，上述方法有所帮助。