使用带有外部 URL 的 NavLink

IT技术 reactjs react-router
2021-04-26 07:47:48

我有以下代码:

    <NavLink to="//student.lvh.me:8080/users/edit">
      <DropDownLink>Wiki</DropDownLink>
    </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/'.

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

3个回答

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

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

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

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

由于 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>