Łącze zewnętrzne React-Router

Ponieważ używam routera React do obsługi tras w aplikacji Reaguj, jestem ciekaw, czy istnieje sposób na przekierowanie do zasobu zewnętrznego.

Powiedz, że ktoś uderza:

example.com/privacy-policy

Chciałbym przekierować do:

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

Znajduję dokładnie zero pomocy w unikaniu pisania tego w zwykłym JS na moim index.html ładującym się za pomocą czegoś takiego:

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

Oto jedna linijka dotycząca używania React Router do przekierowania do łącza zewnętrznego:

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

Wykorzystuje koncepcję czystego komponentu React, aby zredukować kod komponentu do pojedynczej funkcji, która zamiast renderować cokolwiek, przekierowuje przeglądarkę do zewnętrznego adresu URL.

Działa zarówno na React Router 3, jak i 4.

Nie ma potrzeby używania <Link />komponentu z routera reaktywnego.

Jeśli chcesz przejść do linku zewnętrznego, użyj tagu kotwicy.

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

Skończyło się na zbudowaniu własnego komponentu. <Redirect> Pobiera informacje z react-routerelementu, więc mogę je przechowywać w moich trasach. Jak na przykład:

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

Oto mój komponent na wypadek, gdyby ktoś był ciekawy:

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;

EDYCJA - UWAGA: To jest z react-router: 3.0.5, to nie jest takie proste w 4.x

Nie ma potrzeby żądania odpowiedzi routera. Tę czynność można wykonać natywnie i zapewnia ją przeglądarka.

po prostu użyj window.location

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

Z komponentem Link w React-router możesz to zrobić. W właściwości „ do ” możesz określić 3 typy danych:

• ciąg : ciąg znaków reprezentujący położenie łącza, utworzony przez konkatenację nazwy ścieżki, wyszukiwania i właściwości skrótu lokalizacji.
• obiekt : obiekt, który może mieć dowolną z następujących właściwości:
  • pathname : ciąg reprezentujący ścieżkę do połączenia.
  • search : ciąg znaków reprezentujący parametry zapytania.
  • hash : hash do umieszczenia w adresie URL, np. # a-hash.
  • stan : stan, aby zachować lokalizację.
• a function : funkcja, do której bieżące położenie jest przekazywane jako argument i która powinna zwrócić reprezentację położenia w postaci ciągu lub obiektu

Na przykład (link zewnętrzny):

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

Możesz wykonać następujące czynności:

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

Możesz również przekazywać rekwizyty, na których chcesz się znaleźć, takie jak tytuł, identyfikator, nazwa klasy itp.

Korzystając z niektórych informacji tutaj, wymyśliłem następujący komponent, którego możesz użyć w deklaracjach tras. Jest kompatybilny z React Router v4.

Używa maszynopisu, ale konwersja do natywnego javascript powinna być dość prosta:

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

I używaj z:

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

Miałem szczęście z tym:

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

Myślę, że React-Router nie zapewnia takiej obsługi. Dokumentacja wspomina

<Redirect> ustawia przekierowanie do innej trasy w Twojej aplikacji, aby zachować stare adresy URL.

Można spróbować użyć czegoś podobnego React przekierowanie zamiast

Aby rozwinąć odpowiedź Alana, możesz utworzyć <Route/>przekierowanie wszystkich<Link/> z atrybutami „do” zawierającymi „http:” lub „https:” do właściwego zasobu zewnętrznego.

Poniżej znajduje się działający przykład, który można umieścić bezpośrednio w pliku <Router>.

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

DLA V3, chociaż może działać dla V4. Wychodząc od odpowiedzi Erica, musiałem zrobić trochę więcej, na przykład zająć się rozwojem lokalnym, gdzie „http” nie występuje w adresie URL. Przekierowuję również do innej aplikacji na tym samym serwerze.

Dodano do pliku routera:

import RedirectOnServer from './components/RedirectOnServer';

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

A komponent:

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;

Używając Reacta z Typescript, otrzymujesz błąd, ponieważ funkcja musi zwrócić element reakcji, a nie void. Zrobiłem to w ten sposób, używając metody renderowania trasy (i używając routera React v4):

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

Gdzie można również użyć zamiast window.location.assign(), window.location.replace()etc

Jeśli używasz renderowania po stronie serwera, możesz użyć StaticRouter. Za pomocą swojego contextas, propsa następnie dodając <Redirect path="/somewhere" />komponent do swojej aplikacji. Chodzi o to, że za każdym razem, gdy reakcja-router dopasuje komponent przekierowania, doda coś do kontekstu przekazanego do routera statycznego, aby poinformować cię, że twoja ścieżka pasuje do komponentu przekierowania. teraz, gdy wiesz, że trafiłeś w przekierowanie, wystarczy sprawdzić, czy to przekierowanie, którego szukasz. następnie po prostu przekieruj przez serwer. ctx.redirect('https://example/com').

Udało mi się uzyskać przekierowanie w React-router-dom za pomocą następującego

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

W moim przypadku szukałem sposobu na przekierowanie użytkowników za każdym razem, gdy odwiedzają główny adres URL http://myapp.comdo innego miejsca w aplikacji http://myapp.com/newplace. więc powyższe pomogło.