在不重新加载页面的情况下替换当前 url

Question

使用react 16, react-router 4.

我的域假设为“https://www.xyz.c". I'm having anchor tag which should redirect to "https://www.xyz.c/some-path”，无需重新加载页面。

我可以使用 <NavLink> 和 <Link> 以及 to="/some-path" 来实现它。但是，我需要完整的 url 显示在 DOM 中（为什么？好吧，旁注，我正在使用 itemProp 作为模式，我希望锚标记中有完整路径）
用 <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，一旦完全加载，然后在页眉中单击您自己的个人资料按钮。它不会重新加载页面。）

我们该怎么做？

Answer 1

你已经成功了一半，你可以使用 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

在不重新加载页面的情况下替换当前 url

Replace the current url without reloading the page

reactjs

react-router

react-router-v4

react-router-dom