React Router v6 - 处理外部 href 和内部路径

Question

在我使用 react-router v6 的 React 应用程序中，我正在动态检索链接，这些链接可以是常规外部 url（如 https://whosebug.com/）或内部路径（如 "/my-page" ) 对应于 react-router.

的路线

到目前为止，当使用 react-router-dom 的 <Link> 组件时，我只能让它与内部路径一起工作，而不是与外部 url 一起工作。据我了解文档，我找不到实现此目的的方法，至少在 v6 中没有。

所以到目前为止，我想出的最好方法是编写一个自己的 MyLink 组件，根据 href 是否为 <a> 或 <Link>是否外部：

function MyLink(props) {
  const isHrefExternal = props.href.match(/^http|^https|^www/);

  if (isHrefExternal) {
    return <a href={props.href}>{props.children}</a>;
  }

  return <Link to={props.href}>{props.children}</Link>;
}

这当然看起来不是一个很好的解决方案：

isHrefExternal 的检查非常幼稚
由于 <a> 和 <Link> 有不同的道具，因此不清楚 MyLink 应该接受什么道具以及应该如何管理它们。

有关完整示例，请参阅此 codesandbox

你能告诉我如何做得更好吗？理想情况下，可以选择将外部 url 传递给 react-router-dom 的 <Link> 组件，但我找不到。

非常感谢！

Answer 1

Link 组件仅处理您应用程序中的内部 link，并且可能 won't ever handle external links natively。

我没有发现您的代码有任何明显的问题，而且我认为这是一个不错的解决方案。 “isExternal”检查可能是幼稚的，但它只需要涵盖您的特定用例。由于需要新的用例，您可以调整此检查的逻辑。在我合作过的项目中，我们通常只包含一个 isExternal 类型属性和获取的数据，因此应用程序甚至不需要考虑什么是或不是外部 link, 它只是在渲染时检查标志。

React Router v6 - 处理外部 href 和内部路径

React Router v6 - Handle both external hrefs and interal paths

reactjs

react-router

react-router-dom