перенаправление перенаправления на другой домен.

Question

Я использую маршрутизатор реакции для маршрутизации на стороне клиента. У меня есть кнопка, и когда кто-то нажимает кнопку, я хочу перенаправить пользователя на другой URL-адрес. Например, я хочу перенаправить пользователя на «http://www.google.com». Я использовал навигационный микс и использовал this.transitionTo («https://www.google.com»). Но когда я делаю это, я получаю эту ошибку. Инвариантное нарушение: не удается найти маршрут с именем «https://www.google.com».

Я могу использовать window.location, но это правильный путь?

Answer 1

Вам не нужно react-router для внешних ссылок, можно использовать обычные элементы ссылок (как JSX <a href="..."/>)

Вам нужно только react-router, когда у вас есть внутреннего навигации (т.е. от одного компонента к другому), для которого URL-адрес браузера должен выглядеть так, как будто ваше приложение фактически переключает «реальные» URL-адреса.

Answer 2

Почему бы не использовать location property of window объект? Он даже обеспечивает хороший функциональный метод для перехода во внешнее местоположение. См. ref.

Так что, если у вас есть компонент, скажем

class Button extends Component { 
    render() { 
    return (
     <button onClick={::this.handleClick} /> 
    ); 
    } 
} 

тогда handleClick не будет выглядеть

handleClick() { 
    // do something meaningful, Promises, if/else, whatever, and then 
    window.location.assign('http://github.com'); 
} 

Нет необходимости импортировать window, так как это глобальная. Должен отлично работать в любом современном браузере.

Answer 3

Я не мог найти простой способ сделать это с помощью React Router. Как писал @Mike, вы должны использовать привязку (<a>) при отправке пользователя на внешний сайт.

Я создал пользовательский компонент <Link> динамически решить, следует ли вынести маршрутизатор React-<Link> или регулярный <a> тег.

import * as React from "react"; 
import {Link, LinkProps} from "react-router-dom"; 

const ReloadableLink = (props: LinkProps & { forceReload?: boolean }) => { 
    const {forceReload, ...linkProps} = props; 
    if (forceReload) 
     return <a {...linkProps} href={String(props.to)}/>; 
    else 
     return <Link {...linkProps}> 
      {props.children} 
     </Link> 
}; 

export default ReloadableLink;