反应路由器外部链接 - JavaScript

当需要在React应用程序中使用外部链接时，React Router库提供了一个功能强大的组件 - Link。该组件将帮助您创建连接至应用程序之外URL的实际HTML链接。但是，在某些情况下，您可能需要使用React应用程序的另一个组件，例如按钮或自定义文本。在这种情况下，您可以使用路由器的另一个功能 - history。

使用 history 对象

可以使用 history 对象来手动更改当前 URL 并且不进行完整的页面刷新。 history 包含当前URL地址和路由器最近访问过的路径历史记录。在您的组件中，您可以轻松地访问当前 history 对象并使用 push 函数更新 URL。

import { useHistory } from "react-router-dom"

function MyComponent() {
  const history = useHistory()

  function handleClick() {
    history.push("/some-other-page")
  }

  return (
    <button onClick={handleClick}>
      转到另一个页面
    </button>
  )
}

如上所示，通过调用 useHistory 难来访问 history。然后，您可以在组件中使用 history.push 来将浏览器重定向到新页面，而不会进行完整的页面刷新。

注意事项

当使用 history.push 更改 URL 时，React Router将自动进行另一个渲染周期以响应新的 URL。因此，这种方法与其他React Router组件的导航行为非常相似。它允许您为应用程序提供一致和响应的导航体验。

但是，这种方法可能会导致某些浏览器历史记录相关的问题，并且可能影响应用程序中的浏览器的前进和后退行为。如果您担心这种情况，请在history对象上调用 replace 而不是 push。

Conclusion

要使用路由器外部链接，您可以使用 history 对象提供的功能手动更改 URL。这使您能够使用自己的自定义组件而不是 Link。使用 push 函数更新 URL 并在应用程序中提供无缝响应的导航。