Зовнішнє посилання React-Router

Оскільки я використовую react-router для обробки моїх маршрутів у реагуючому додатку, мені цікаво, чи є спосіб перенаправити на зовнішній ресурс.

Скажіть, хто потрапив:

example.com/privacy-policy

Я хотів би перенаправити на:

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

Я знаходжу абсолютно нульову допомогу, щоб уникнути написання її у звичайному JS на моєму завантаженні index.html чимось на зразок:

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

Ось однолінійка для використання маршрутизатора React для переадресації на зовнішнє посилання:

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

Він використовує концепцію чистого компонента React, щоб звести код компонента до єдиної функції, яка замість того, щоб нічого передати, переспрямовує браузер на зовнішню URL-адресу.

Працює як на React Router 3, так і на 4.

Немає необхідності використовувати <Link />компонент від react-router.

Якщо ви хочете перейти до зовнішнього посилання, використовуйте тег прив’язки.

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

Я фактично закінчив будувати свій власний компонент. <Redirect> Він бере інформацію від react-routerелемента, щоб я міг зберігати його у своїх маршрутах. Як от:

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

Ось мій компонент на випадок, кому цікаво:

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;

РЕДАКТУВАННЯ - ПРИМІТКА. Це з react-router: 3.0.5, це не так просто в 4.x

Не потрібно запитувати маршрутизатор реагування. Цю дію можна здійснити як вдома, так і надає браузер.

просто використовувати window.location

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

З компонентом Link реактора-маршрутизатора ви можете це зробити. У програмі " до " ви можете вказати 3 типи даних:

• рядок : рядкове представлення місця розташування посилання, створене об'єднанням властивостей імені шляху, пошуку та хешу.
• об’єкт : Об'єкт, який може мати будь-яке з наступних властивостей:
  • ім'я шляху : рядок, що представляє шлях до посилання.
  • пошук : рядкове подання параметрів запиту.
  • хеш : хеш, який потрібно ввести в URL, наприклад, # а-хеш.
  • state : держава, щоб зберігати місце розташування.
• функція : функція, якій поточне місцезнаходження передається як аргумент і яка повинна повертати подання про розташування як рядок або як об'єкт

Для вашого прикладу (зовнішнє посилання):

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

Ви можете зробити наступне:

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

Ви також можете передавати реквізити, якими ви хочете бути, такі як title, id, className тощо.

Використовуючи деяку інформацію тут, я придумав наступний компонент, який ви можете використовувати у своїх деклараціях про маршрут. Він сумісний з React Router v4.

Він використовує машинопис, але повинен бути досить прямим для перетворення на рідний JavaScript:

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

І використовувати з:

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

Мені пощастило з цим:

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

Я не думаю, що React-Router надає цю підтримку. У документації згадується

<Перенаправлення> встановлює переспрямування на інший маршрут у вашій програмі для підтримки старих URL-адрес.

Ви можете спробувати використовувати що - щось на зразок React-Redirect замість

Щоб розширити відповідь Алана, ви можете створити атрибути, <Route/>що перенаправляють усі <Link/>атрибути "до", що містять "http:" або "https:", на правильний зовнішній ресурс.

Нижче наведено робочий приклад цього, який можна розмістити безпосередньо у вашому <Router>.

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

ДЛЯ V3, хоча може працювати і для V4. Виходячи з відповіді Еріка, мені потрібно було зробити трохи більше, як обробити місцевий розвиток, де в URL-адресі немає http. Я також переспрямовую на іншу програму на тому ж сервері.

Додано до файлу маршрутизатора:

import RedirectOnServer from './components/RedirectOnServer';

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

І Компонент:

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 with Typescript, ви отримуєте помилку, оскільки функція повинна повертати елемент реагування, а не void. Тому я зробив це таким чином, використовуючи метод візуалізації маршрутів (і використовуючи маршрутизатор React v4):

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

Де ви могли б замість того, щоб використовувати window.location.assign(), і window.location.replace()т.д.

Якщо ви використовуєте серверне відшкодування, ви можете використовувати StaticRouter. З вашої , contextяк propsі потім додати <Redirect path="/somewhere" />компонент в вашому додатку. Ідея полягає в тому, що щоразу, як маршрутизатор реакцій відповідає компоненту переадресації, він додасть щось у контекст, який ви перейшли у статичний маршрутизатор, щоб повідомити, що ваш шлях відповідає компоненту переадресації. тепер, коли ви знаєте, що ви потрапили на переспрямування, вам просто потрібно перевірити, чи це переспрямування, яке ви шукаєте. потім просто перенаправляти через сервер. ctx.redirect('https://example/com').

Мені вдалося досягти переадресації в реакторі-маршрутизаторі, використовуючи наступне

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

У моєму випадку я шукав спосіб перенаправити користувачів кожного разу, коли вони відвідують кореневу URL-адресу http://myapp.comкудись ще в додатку http://myapp.com/newplace. тому вищесказане допомогло.