React-Router Harici bağlantısı

Bir react uygulamasında rotalarımı işlemek için react-router kullandığım için, harici bir kaynağa yönlendirmenin bir yolu olup olmadığını merak ediyorum.

Birinin isabet ettiğini söyle:

example.com/privacy-policy

Yeniden yönlendirilmesini istiyorum:

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

İndex.html'de düz JS'de yazmaktan kaçınmak için tam olarak sıfır yardım buluyorum:

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

Harici bir bağlantıya yönlendirmek için React Router'ı kullanmak için tek satırlık bir kılavuz:

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

Bileşen kodunu, herhangi bir şeyi oluşturmak yerine tarayıcıyı harici bir URL'ye yönlendiren tek bir işleve indirgemek için React pure bileşen konseptini kullanır.

Hem React Router 3 hem de 4 üzerinde çalışır.

<Link />React-router'dan bileşen kullanmaya gerek yoktur .

Harici bağlantıya gitmek istiyorsanız bir bağlantı etiketi kullanın.

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

Aslında kendi Bileşenimi oluşturmaya başladım. <Redirect> Öğeden bilgi alır, react-routerböylece onu rotamda tutabilirim. Gibi:

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

İşte benim bileşen durumum - herkes merak ediyor:

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;

DÜZENLEME - NOT: Bu, react-router: 3.0.54.x'te o kadar basit değil

React router talep etmesine gerek yoktur. Bu işlem yerel olarak yapılabilir ve tarayıcı tarafından sağlanır.

sadece kullan window.location

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

React-router'ın Link bileşeni ile bunu yapabilirsiniz. In " için verilerin 3 türlerini belirtebilirsiniz desteklemek":

• a string : Konumun yol adı, arama ve karma özellikleri birleştirilerek oluşturulan Bağlantı konumunun bir dize temsili.
• bir nesne : Aşağıdaki özelliklerden herhangi birine sahip olabilen bir nesne:
  • yol adı : Bağlanılacak yolu temsil eden bir dize.
  • arama : Sorgu parametrelerinin dize temsili.
  • hash : URL'ye yerleştirilecek bir hash, örneğin # a-hash.
  • durum : Konumda kalıcı olmak için durum.
• a işlev : Geçerli konumun argüman olarak iletildiği ve konum gösterimini bir dizge veya nesne olarak döndürmesi gereken bir işlev

Örneğiniz için (harici bağlantı):

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

Aşağıdakileri yapabilirsiniz:

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

Ayrıca bir başlık, kimlik, sınıf adı vb. Gibi olmasını istediğiniz unsurları da iletebilirsiniz.

Buradaki bazı bilgileri kullanarak, rota bildirimlerinizde kullanabileceğiniz aşağıdaki bileşeni buldum. React Router v4 ile uyumludur.

Typcript kullanıyor, ancak yerel javascript'e dönüştürmek oldukça kolay olmalı:

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

Ve şununla kullanın:

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

Şansım yaver gitti:

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

React-Router'ın bu desteği sağladığını sanmıyorum. belgeler söz

<Yeniden Yönlendir> , eski URL'leri korumak için uygulamanızda başka bir yola yönlendirme kurar .

Bunun yerine React-Redirect gibi bir şey kullanmayı deneyebilirsiniz

Alan'ın cevabını genişletmek için, "http:" veya "https:" içeren "to" özniteliklerine sahip olanları doğru harici kaynağa <Route/>yeniden yönlendiren bir tane oluşturabilirsiniz <Link/>.

Aşağıda, doğrudan sizin sayfanıza yerleştirilebilecek çalışan bir örnek bulunmaktadır <Router>.

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

V3 İÇİN, ancak V4 için çalışabilir. Eric'in cevabından yola çıkarak, url'de "http" nin bulunmadığı yerel geliştirmeyi ele almak gibi biraz daha yapmam gerekiyordu. Aynı sunucudaki başka bir uygulamaya da yönlendiriyorum.

Yönlendirici dosyasına eklendi:

import RedirectOnServer from './components/RedirectOnServer';

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

Ve Bileşen:

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;

React'i Typescript ile kullandığınızda bir hata alırsınız çünkü fonksiyon bir react elemanı döndürmemelidir, döndürmez void. Bu yüzden, Route oluşturma yöntemini kullanarak (ve React yönlendirici v4 kullanarak) bu şekilde yaptım:

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

Bunun yerine aynı zamanda kullanabilirsiniz nerede window.location.assign(), window.location.replace()vb

Sunucu tarafı yönlendirmeyi kullanıyorsanız kullanabilirsiniz StaticRouter. Senin ile contextolduğu gibi propsve daha sonra ekleme <Redirect path="/somewhere" />uygulamanızda bileşeni. Buradaki fikir, react-router'ın bir yönlendirme bileşeniyle eşleştiği her seferinde, yolunuzun bir yönlendirme bileşeni ile eşleştiğini size bildirmek için statik yönlendiriciye geçirdiğiniz bağlama bir şeyler ekleyeceğidir. Artık bir yönlendirmeye bastığınızı bildiğinize göre, aradığınız yönlendirmenin bu olup olmadığını kontrol etmeniz yeterlidir. sonra sadece sunucu üzerinden yönlendirin. ctx.redirect('https://example/com').

Aşağıdakileri kullanarak react-router-dom'da bir yönlendirme elde edebildim

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

Benim durumum için, kullanıcıları kök URL'yi her ziyaret ettiklerinde http://myapp.comuygulama içinde başka bir yere yönlendirmenin bir yolunu arıyordum http://myapp.com/newplace. bu yüzden yukarıdakiler yardımcı oldu.