Заменить текущий URL без перезагрузки страницы - PullRequest
Новая
       12

Заменить текущий URL без перезагрузки страницы

0 голосов
/ 03 мая 2019

Использование реакции 16, маршрутизатор реакции 4.

Предположим, мой домен "https://www.xyz.c". У меня есть тег привязки, который следует перенаправить на" https://www.xyz.c/some-path" без перезагрузки страницы.

  1. Я могу реализовать это, используя <NavLink> и <Link> с to="/some-path".Тем не менее, мне нужно, чтобы полный URL-адрес отображался в DOM (почему? Ну, на заметку, я использую itemProp для схемы, для которой мне нужен полный путь в теге привязки)
  2. Реализация его с помощью <a> иprops.history тег, подобный следующему, приводит к повторной замене на относительный URL, то есть в URL он становится https://www.xyz.c/https://www.xyz.c/some-path. 
<a data-url="https://www.xyz.c/some-path" onClick={this.onClick}>Label</a>

onClick = e => {
  e.preventDefault();
  this.props.history.push(urlFromDataSet);
}

Это кажется невозможным с <Navlink>, <Link> или <a> + props.history, поскольку политика такова, что history.replace, or history.push работает с URL того же происхождения.Мой URL-адрес также того же происхождения, однако, я даю полный путь в href.

Однако, Facebook достигает того же в своем заголовке (Проверьте FB, перейдя на домашнюю страницу, после загрузкиполностью , затем нажмите на кнопку своего профиля в заголовке. Она не перезагружает страницу.)

Как мы можем это сделать?

1 Ответ

1 голос
/ 03 мая 2019

Вы наполовину там, вы можете использовать URL API, чтобы получить путь к атрибуту data-url, а затем нажать его. 

const url = new URL(dataUrl) 
this.props.history.push(url.pathname)

Подробнее о URL API: https://developer.mozilla.org/en-US/docs/Web/API/URL

...