使用带有外部 URL 的 NavLink答案

【问题标题】：using NavLink with external URL使用带有外部 URL 的 NavLink
【发布时间】：2017-09-12 12:32:59
【问题描述】：

我有以下代码：

    <NavLink to="//student.lvh.me:8080/users/edit">
      <DropDownLink>Wiki</DropDownLink>
    </NavLink>

如何让 navlink 使用外部 URL？我在控制台中收到以下错误：

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http://student.lvh.me:8080/users/edit' cannot be created in a document with origin 'http://localhost:3000' and URL 'http://localhost:3000/'.

有没有更好的方法来处理外部链接？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

react-router 用于在单页应用程序中路由，即在客户端处理路由。
当您想路由到外部页面时，例如在服务器端处理路由，您可以使用普通的锚标记：

<a href="url.com">Wiki</a>

【讨论】：

【解决方案2】：

<NavLink> 非常容易用于导航到外部 url。试试这个：

<NavLink to={{pathname="https://infortts.com"}} target="_blank">
  Some Component Here
</NavLink>

【讨论】：

它应该是 to={{pathname: "https://infortts.com"}} 而不是 to={{pathname="https://infortts.com"}}

【解决方案3】：

由于 NavLink 使用路由器，外部 url 应该通过“as”

 <NavLink as="a" href="https://student.lvh.me:8080/users/edit" target="_blank" >
    <DropDownLink>Wiki</DropDownLink>
 </NavLink>

或者不使用 React 路由器

<a href="url.com">Wiki</a>

【讨论】：