Question

我有一个内置的应用程序反应，我正在尝试实现重定向，我需要将用户从我的应用程序基本URL重定向到一个全新的域。

示例：

反应应用基础网址 - ＆＃34; localhost：3001＆＃34; 重定向到 - ＆＃34; www.google.com＆＃34;

我在我的应用中使用反应路线。

ReactDOM.render（（

如果我按上述方式使用重定向，则会重定向到＆＃34; http://localhost:3001/#/http:/www.google.com＆＃34;

如何在重定向到新域时删除基本URL？

Answer 1

React-route只允许重定向到其他路由，您可以通过阅读Github问题here确认这一点

所以答案是不，你不能。

如果我在这里没有误解你的意图，你想重定向路由器没有处理的任何内容。

作为解决方案，我想到了一个方法：

专用组件：使用与此类似的componentDidMount创建专用于此路线的组件：

componentDidMount() {
  window.location.assign('http://github.com');
}

作为替代方案，您可以直接在服务器中捕获它并在那里重定向。

但最终你需要寻找替代的solutoin，因为react-route不允许重定向到外部网址

Answer 2

扩展 Facino La Rocca 的出色回答

import React, {Component} from 'react';

class DomainUrlRedirect extends Component{
    componentDidMount(){
        const{searchParams, pathname, url} = this.props
        let uri = new URL(url);
        uri.pathname = pathname
        for(const paramName in searchParams){
            uri.searchParams.append(paramName, searchParams[paramName])
        }
        window.location.assign(uri.href)
    }
    render(){
        return(<span data-test-component="DomainUrlRedirect"></span>)
    }
}

export default DomainUrlRedirect

您可以利用现代浏览器支持的 URL 实用程序来正确构建您的 URL。

另外，不要忘记组件仍然会尝试渲染。在条件下将其渲染为其他组件的一部分，以便使用它的对象不会消失。

render(){
  const{ redirectNow } = this.props;
  return(<div>
          <p>Important content</p>
          {redirectNow &&
             <DomainUrlRedirect {...url_params}/>
          }
  </div>)
}

React - 重定向到新域

2 个答案: