Liên kết ngoài React-Router

Vì tôi đang sử dụng bộ định tuyến phản ứng để xử lý các tuyến đường của mình trong ứng dụng phản ứng, tôi tò mò liệu có cách nào để chuyển hướng đến tài nguyên bên ngoài không.

Giả sử ai đó đánh:

example.com/privacy-policy

Tôi muốn nó chuyển hướng đến:

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

Tôi không tìm thấy sự trợ giúp chính xác nào trong việc tránh viết nó bằng JS thuần túy khi tải index.html của tôi với một cái gì đó như:

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

Đây là một phần mềm để sử dụng React Router để chuyển hướng đến một liên kết bên ngoài:

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

Nó sử dụng khái niệm thành phần thuần túy của React để giảm mã của thành phần thành một chức năng duy nhất, thay vì hiển thị bất kỳ thứ gì, chuyển hướng trình duyệt đến một URL bên ngoài.

Hoạt động trên cả React Router 3 và 4.

Không cần sử dụng <Link />thành phần từ bộ định tuyến phản ứng.

Nếu bạn muốn truy cập liên kết bên ngoài, hãy sử dụng thẻ liên kết.

<a target="_blank" href="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies">Policies</a>

Tôi thực sự đã xây dựng Thành phần của riêng mình. <Redirect> Nó lấy thông tin từ react-routerphần tử để tôi có thể giữ nó trong các tuyến đường của mình. Nhu la:

<Route
  path="/privacy-policy"
  component={ Redirect }
  loc="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies"
  />

Đây là thành phần của tôi trong trường hợp bất kỳ ai tò mò:

import React, { Component } from "react";

export class Redirect extends Component {
  constructor( props ){
    super();
    this.state = { ...props };
  }
  componentWillMount(){
    window.location = this.state.route.loc;
  }
  render(){
    return (<section>Redirecting...</section>);
  }
}

export default Redirect;

CHỈNH SỬA - LƯU Ý: Điều này với react-router: 3.0.5, nó không đơn giản như vậy trong 4.x

Nó không cần phải yêu cầu bộ định tuyến phản ứng. Hành động này có thể được thực hiện tự nhiên và nó được cung cấp bởi trình duyệt.

chỉ dùng window.location

class RedirectPage extends React.Component {
  componentDidMount(){
    window.location.replace('http://www.google.com')
  }
}

Với thành phần Link của react-router, bạn có thể làm được điều đó. Trong phần hỗ trợ " to ", bạn có thể chỉ định 3 loại dữ liệu:

• chuỗi : Biểu diễn chuỗi của vị trí Liên kết, được tạo bằng cách nối tên đường dẫn, tìm kiếm và thuộc tính băm của vị trí.
• một đối tượng : Một đối tượng có thể có bất kỳ thuộc tính nào sau đây:
  • pathname : Một chuỗi đại diện cho đường dẫn để liên kết đến.
  • tìm kiếm : Biểu diễn chuỗi các tham số truy vấn.
  • băm : Một hàm băm để đặt trong URL, ví dụ: # a-hash.
  • trạng thái : Trạng thái kiên trì đến vị trí.
• một hàm : Một hàm mà vị trí hiện tại được truyền dưới dạng đối số và sẽ trả về biểu diễn vị trí dưới dạng một chuỗi hoặc dưới dạng một đối tượng

Đối với ví dụ của bạn (liên kết bên ngoài):

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

Bạn có thể làm như sau:

<Link to={{ pathname: "https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" }} target="_blank" />

Bạn cũng có thể chuyển các đạo cụ mà bạn muốn có như tiêu đề, id, className, v.v.

Sử dụng một số thông tin ở đây, tôi đã đưa ra thành phần sau mà bạn có thể sử dụng trong khai báo tuyến đường của mình. Nó tương thích với React Router v4.

Nó sử dụng typecript, nhưng sẽ khá dễ dàng để chuyển đổi sang javascript gốc:

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

Và sử dụng với:

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

Tôi đã gặp may với điều này:

  <Route
    path="/example"
    component={() => {
    global.window && (global.window.location.href = 'https://example.com');
    return null;
    }}
/>

Tôi không nghĩ rằng React-Router cung cấp hỗ trợ này. Các tài liệu đề cập đến

<Redirect> thiết lập chuyển hướng đến một tuyến đường khác trong ứng dụng của bạn để duy trì các URL cũ.

Bạn có thể thử sử dụng một cái gì đó như React-Redirect để thay thế

Để mở rộng câu trả lời của Alan, bạn có thể tạo một câu trả lời <Route/>chuyển hướng tất cả<Link/> thuộc tính "tới" có chứa 'http:' hoặc 'https:' đến đúng tài nguyên bên ngoài.

Dưới đây là một ví dụ hoạt động của điều này có thể được đặt trực tiếp vào của bạn <Router>.

<Route path={['/http:', '/https:']} component={props => {
  window.location.replace(props.location.pathname.substr(1)) // substr(1) removes the preceding '/'
  return null
}}/>

CHO V3, mặc dù nó có thể hoạt động cho V4. Ngoài câu trả lời của Eric, tôi cần làm thêm một chút, như xử lý phát triển cục bộ nơi 'http' không có trên url. Tôi cũng đang chuyển hướng đến một ứng dụng khác trên cùng một máy chủ.

Đã thêm vào tệp bộ định tuyến:

import RedirectOnServer from './components/RedirectOnServer';

       <Route path="/somelocalpath"
          component={RedirectOnServer}
          target="/someexternaltargetstring like cnn.com"
        />

Và thành phần:

import React, { Component } from "react";

export class RedirectOnServer extends Component {

  constructor(props) {
    super();
    //if the prefix is http or https, we add nothing
    let prefix = window.location.host.startsWith("http") ? "" : "http://";
    //using host here, as I'm redirecting to another location on the same host
    this.target = prefix + window.location.host + props.route.target;
  }
  componentDidMount() {
    window.location.replace(this.target);
  }
  render(){
    return (
      <div>
        <br />
        <span>Redirecting to {this.target}</span>
      </div>
    );
  }
}

export default RedirectOnServer;

Sử dụng React với Typescript, bạn sẽ gặp lỗi vì hàm phải trả về phần tử phản ứng chứ không phải void. Vì vậy, tôi đã làm theo cách này bằng cách sử dụng phương pháp kết xuất tuyến đường (và sử dụng bộ định tuyến React v4):

redirectToHomePage = (): null => {
    window.location.reload();
    return null;
  };    
<Route exact path={'/'} render={this.redirectToHomePage} />

Thay vào đó bạn cũng có thể sử dụng ở đâu window.location.assign(), window.location.replace()v.v.

Nếu bạn đang sử dụng kết xuất phía máy chủ, bạn có thể sử dụng StaticRouter. Với contextvai trò của bạn propsvà sau đó thêm <Redirect path="/somewhere" />thành phần trong ứng dụng của bạn. Ý tưởng là mỗi khi react-router khớp với một thành phần chuyển hướng, nó sẽ thêm một cái gì đó vào ngữ cảnh bạn đã chuyển vào bộ định tuyến tĩnh để cho bạn biết đường dẫn của bạn khớp với một thành phần chuyển hướng. bây giờ bạn biết bạn đã nhấn một chuyển hướng, bạn chỉ cần kiểm tra xem đó có phải là chuyển hướng bạn đang tìm kiếm hay không. sau đó chỉ cần chuyển hướng qua máy chủ. ctx.redirect('https://example/com').

Tôi có thể đạt được chuyển hướng trong react-router-dom bằng cách sử dụng như sau

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

Đối với trường hợp của tôi, tôi đang tìm cách chuyển hướng người dùng bất cứ khi nào họ truy cập URL gốc http://myapp.comđến một nơi khác trong ứng dụng http://myapp.com/newplace. vì vậy ở trên đã giúp.