html 标签“/href”和导航链接或 Link 之间的区别
difference between html tag "/href" and navlink or Link
html标签“/href”和react-router提供的导航页面的navlink有什么区别?我可以同时使用两者来将页面导航到不同的 URL,那么为什么需要引入 Navlink 或 Link?
href
属性会触发页面刷新,从而重置应用程序状态。但是 react-router 的 link 和 navlink 不会触发页面刷新。由于 React 大部分时间用于创建单页应用程序,请确保在使用路由
时选择 Link 或 Navlink
如果我们使用 href
等锚元素创建 link,单击它们会导致整个页面重新加载。 React Router 提供了一个 <Link>
组件来防止这种情况发生。当单击 <Link>
时,URL 将被更新并且呈现的内容将更改而无需重新加载页面。所以基本上总结一下
react提供的navlink/link不刷新页面而href刷新页面
当你需要在active上使用样式或者class属性时,那么你可以使用navlink
让我们看例子:
Link
允许用户在您的应用程序中导航的主要方式。将使用适当的 href.
呈现完全可访问的锚标记
<Link to="/">Home</Link>
导航Link
一个特殊版本,当它匹配当前 URL.
时,将向呈现的元素添加样式属性
<NavLink to="/" activeClassName="active">Home</NavLink>
html标签“/href”和react-router提供的导航页面的navlink有什么区别?我可以同时使用两者来将页面导航到不同的 URL,那么为什么需要引入 Navlink 或 Link?
href
属性会触发页面刷新,从而重置应用程序状态。但是 react-router 的 link 和 navlink 不会触发页面刷新。由于 React 大部分时间用于创建单页应用程序,请确保在使用路由
如果我们使用 href
等锚元素创建 link,单击它们会导致整个页面重新加载。 React Router 提供了一个 <Link>
组件来防止这种情况发生。当单击 <Link>
时,URL 将被更新并且呈现的内容将更改而无需重新加载页面。所以基本上总结一下
react提供的navlink/link不刷新页面而href刷新页面
当你需要在active上使用样式或者class属性时,那么你可以使用navlink
让我们看例子:
Link
允许用户在您的应用程序中导航的主要方式。将使用适当的 href.
呈现完全可访问的锚标记<Link to="/">Home</Link>
导航Link
一个特殊版本,当它匹配当前 URL.
时,将向呈现的元素添加样式属性<NavLink to="/" activeClassName="active">Home</NavLink>