React-Router外部链路

由于我在React应用程序中使用React路由器来处理我的路由，我很好奇是否有一种方法可以重定向到外部资源。

比如有人打人:

example.com/privacy-policy

我希望它重定向到:

example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies

我发现在我的index.html加载中，避免用纯JavaScript编写它完全没有任何帮助:

if (window.location.path === "privacy-policy"){
  window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"
}

当前回答

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

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

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

其他回答

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

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

我遇到了同样的问题，并在React中使用http://或https://解决了它。

像: <a target="_blank" href="http://www.example.com/" title="example">见detail</a>

如果你使用服务器端渲染，你可以使用StaticRouter。用你的上下文作为道具，然后在你的应用程序中添加<重定向路径="/somewhere" />组件。这个想法是每次React路由器匹配一个重定向组件时，它会添加一些东西到你传递到静态路由器的上下文中，让你知道你的路径匹配一个重定向组件。

现在你知道你点击了一个重定向，你只需要检查这是否是你正在寻找的重定向。然后通过服务器重定向。ctx.redirect(“https://example/com”)。

使用React和TypeScript，你会得到一个错误，因为函数必须返回一个React元素，而不是void。所以我这样做，使用Route渲染方法(并使用React路由器v4):

redirectToHomePage = (): null => {
    window.location.reload();
    return null;
};

<Route exact path={'/'} render={this.redirectToHomePage} />

你也可以使用window.location.assign()， window.location.replace()等。

最简单的解决方案是使用渲染函数并更改window.location。

<Route path="/goToGoogle"
       render={() => window.location = "https://www.google.com"} />

如果你想要一个小型的可重用组件，你可以像这样提取它:

const ExternalRedirect = ({ to, ...routeProps }) => {
   return <Route {...routeProps} render={() => window.location = to} />;
};

然后像这样使用它(例如在你的路由器开关中):

<Switch>
    ...
    <ExternalRedirect exact path="/goToGoogle" to="https://www.google.com" />
</Switch>

推荐文章