Tautan Eksternal React-Router

Karena saya menggunakan react-router untuk menangani rute saya di aplikasi react, saya ingin tahu apakah ada cara untuk mengalihkan ke sumber daya eksternal.

Katakanlah seseorang memukul:

example.com/privacy-policy

Saya ingin ini dialihkan ke:

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

Saya menemukan tidak ada bantuan dalam menghindari menulisnya dalam JS biasa di index.html saya memuat dengan sesuatu seperti:

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

Berikut ini satu baris untuk menggunakan React Router untuk mengarahkan ke tautan eksternal:

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

Ia menggunakan konsep komponen murni React untuk mengurangi kode komponen menjadi satu fungsi yang, alih-alih merender apa pun, mengalihkan browser ke URL eksternal.

Bekerja baik pada React Router 3 dan 4.

Tidak perlu menggunakan <Link />komponen dari react-router.

Jika Anda ingin pergi ke tautan eksternal, gunakan tag jangkar.

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

Saya akhirnya membangun Komponen saya sendiri. <Redirect> Dibutuhkan info dari react-routerelemen sehingga saya bisa menyimpannya di rute saya. Seperti:

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

Berikut adalah komponen saya, siapa pun yang penasaran:

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;

EDIT - CATATAN: Ini dengan react-router: 3.0.5, tidak sesederhana itu di 4.x.

Itu tidak perlu meminta router react. Tindakan ini dapat dilakukan secara native dan disediakan oleh browser.

gunakan saja window.location

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

Dengan komponen Link dari react-router Anda dapat melakukan itu. Di prop " ke " Anda dapat menentukan 3 jenis data:

• a string : Representasi string dari lokasi Tautan, dibuat dengan menggabungkan nama lokasi lokasi, pencarian, dan properti hash.
• sebuah objek : Sebuah objek yang dapat memiliki salah satu dari properti berikut ini:
  • pathname : String yang merepresentasikan jalur yang akan ditautkan.
  • search : Representasi string dari parameter kueri.
  • hash : Sebuah hash untuk dimasukkan ke dalam URL, misalnya # a-hash.
  • state : Status untuk mempertahankan lokasi.
• a function : Sebuah fungsi yang dilewatkan ke lokasi saat ini sebagai argumen dan yang harus mengembalikan representasi lokasi sebagai string atau sebagai objek

Untuk contoh Anda (tautan eksternal):

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

Anda dapat melakukan hal berikut:

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

Anda juga dapat mengirimkan props yang Anda inginkan seperti title, id, className, dll.

Menggunakan beberapa info di sini, saya datang dengan komponen berikut yang dapat Anda gunakan dalam deklarasi rute Anda. Ini kompatibel dengan React Router v4.

Ini menggunakan skrip jenis, tetapi harus cukup mudah untuk dikonversi ke javascript asli:

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

Dan gunakan dengan:

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

Saya beruntung dengan ini:

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

Saya tidak berpikir React-Router menyediakan dukungan ini. The dokumentasi menyebutkan

<Redirect> menyiapkan pengalihan ke rute lain dalam aplikasi Anda untuk mempertahankan URL lama.

Anda dapat mencoba menggunakan sesuatu seperti React-Redirect sebagai gantinya

Untuk memperluas jawaban Alan, Anda dapat membuat <Route/>yang mengalihkan semua <Link/>dengan atribut "ke" yang berisi 'http:' atau 'https:' ke sumber daya eksternal yang benar.

Di bawah ini adalah contoh kerja yang dapat ditempatkan langsung ke file <Router>.

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

UNTUK V3, meskipun mungkin bekerja untuk V4. Keluar dari jawaban Eric, saya perlu melakukan lebih banyak, seperti menangani pengembangan lokal di mana 'http' tidak ada di url. Saya juga mengalihkan ke aplikasi lain di server yang sama.

Ditambahkan ke file router:

import RedirectOnServer from './components/RedirectOnServer';

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

Dan Komponennya:

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;

Menggunakan React with Typescript Anda mendapatkan kesalahan karena fungsinya harus mengembalikan elemen react, bukan void. Jadi saya melakukannya dengan cara ini menggunakan metode render Route (dan menggunakan React router v4):

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

Di mana Anda juga bisa menggunakan window.location.assign(), window.location.replace()dll

Jika Anda menggunakan rending sisi server, Anda dapat menggunakan StaticRouter. Dengan contextsebagai Anda propsdan kemudian menambahkan <Redirect path="/somewhere" />komponen di aplikasi Anda. Idenya adalah setiap react-router cocok dengan komponen redirect, itu akan menambahkan sesuatu ke dalam konteks yang Anda berikan ke router statis untuk memberi tahu Anda bahwa jalur Anda cocok dengan komponen pengalihan. Sekarang setelah Anda tahu bahwa Anda menekan redirect, Anda hanya perlu memeriksa apakah itu pengalihan yang Anda cari. lalu alihkan melalui server. ctx.redirect('https://example/com').

Saya dapat mencapai pengalihan di react-router-dom menggunakan yang berikut ini

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

Untuk kasus saya, saya sedang mencari cara untuk mengarahkan pengguna setiap kali mereka mengunjungi URL root http://myapp.comke tempat lain di dalam aplikasi http://myapp.com/newplace. jadi hal di atas membantu.