React-Router Внешняя ссылка

Ответ 1

На самом деле я создал собственный компонент. <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

Ответ 2

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

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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

Ответ 5

Используя некоторую информацию здесь, я придумал следующий компонент, который вы можете использовать в своих объявлениях маршрута. Это совместимо с 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'}
/>

Ответ 6

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

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

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

Ответ 7

FOR 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;

Ответ 8

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

Ниже приведен рабочий пример этого, который можно поместить прямо в ваш <Router>.

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

Ответ 9

Используя React with Typcript, вы получаете ошибку, так как функция должна возвращать элемент реакции, а не void. Поэтому я сделал это так, используя метод рендеринга Route (и используя React router v4):

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

Вместо этого вы можете использовать window.location.assign(), window.location.replace() т.д.

Ответ 10

Если вы используете разборку на стороне сервера, вы можете использовать StaticRouter. С помощью context в качестве props, а затем добавьте компонент <Redirect path="/somewhere" /> в ваше приложение. Идея заключается в том, что каждый раз, когда response-router сопоставляет компонент перенаправления, он добавляет что-то в контекст, который вы передавали в статический маршрутизатор, чтобы сообщить, что ваш путь соответствует компоненту перенаправления. теперь, когда вы знаете, что попали в перенаправление, вам просто нужно проверить, есть ли это перенаправление, которое вы ищете. затем просто перенаправлять через сервер. ctx.redirect('https://example/com').

Ответ 11

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

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

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