it-roy-ru.com

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"
}
51
Eric Hodonsky

Я фактически закончил создание своего собственного Компонента. <Redirect>Он получает информацию от элемента react-router, чтобы я мог хранить ее в своих маршрутах. Такие как:

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

Вот мой компонент incase-всем интересно:

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

23
Relic

Вот одна строка для использования React Router для перенаправления на внешнюю ссылку:

<Route path='/privacy-policy' component={() => { window.location = 'https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies'; return null;} }/>

Он использует концепцию компонента React pure, чтобы свести код компонента к одной функции, которая, вместо того, чтобы что-то отображать, перенаправляет браузер на внешний URL-адрес.

Работает как на React Router 3 и 4.

64
Evgeny Lukianchikov

Нет необходимости использовать компонент <Link /> от реактивного маршрутизатора.

Если вы хотите перейти на внешнюю ссылку, используйте тег привязки.

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

Я не думаю, что React-Router предоставляет такую ​​поддержку. документация упоминает

<Redirect> устанавливает перенаправление на другой маршрут в ваше приложение для поддержки старых URL-адресов.

Вы можете попробовать использовать что-то вроде React-Redirect вместо

0
ytibrewala

Мне удалось добиться перенаправления в реакции-маршрутизатор-дом, используя следующие

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

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

0
walecloud

ДЛЯ V3, хотя это может работать для V4. Отвечая на ответ Relic, мне нужно было сделать немного больше, например, обрабатывать локальную разработку, где http не присутствует в URL. Я также перенаправляю на другое приложение на том же сервере.

Добавлено в файл роутера:

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;
0
MattC

Не нужно запрашивать реакцию роутера. Это действие может быть выполнено изначально и предоставляется браузером.

просто используйте window.location

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