英文:
what's the difference between <a> and <button> and <Link> from react-router-dom?
问题
什么是这三个标签特性的区别？
哪一个是最佳实践？
<a href='/questions/aks'> 路由到提问页面 </a>
<Link to='/questions/aks' /> 路由到提问页面 </Link>
const handleButtonClick = () => {
navigate('/questions/aks')
}
<button onClick={handleButtonClick}> 路由到提问页面 </button>
我正在使用React、react-router-dom和styled-components编写CRA应用程序。
我想在用户点击HTML元素时更改URL路径（路由）。
我尝试了这三种方法，但没有注意到关键区别。
有人能解释一下这些概念吗？
英文:
What's the difference between these three tags feature?
Which one is the best practice?
<a href='/questions/aks'> Routing to Ask Question Page </a>
<Link to='/questions/aks' /> Routing to Ask Question Page </Link>
const handleButtonClick = () => {
navigate('/questions/aks')
}
<button onClick={handleButtonClick}> Routing to Ask Question Page </button>
I'm writing CRA application using react, react-router-dom, styled-components
I want to change url path(routing) when user click html element.
I've tried three of them but I haven't notice key difference.
Can anyone explain me about these concepts?
答案1
得分: 2
尽管您可以使用这3种方式进行重定向，但它们之间存在一些差异：
-
<a>元素是用于重定向的本机浏览器元素，它无需任何额外的 JavaScript 功能，浏览器能够理解浏览器中的后退和前进按钮。 -
<Link>是 react-router-dom React 组件。它最终会在 HTML 中呈现<a>元素，并在其中包含一些逻辑，它使用 react-router-dom API 来工作，一旦使用它，您可以利用与该库相关的一些 react-router-dom 功能。 -
<button>元素是浏览器中的另一个本机元素，<a>和<button>之间的主要区别在于语义，<a>旨在用于重定向，而<button>旨在在单击后执行函数。
您可以使用 <button> 进行重定向，并在 <a> 元素中使用 onClick，但从语义上讲，这将是不正确的。
语义是在 HTML 元素中正确使用的关键。
英文:
Despite you can use these 3 for redirect these are some of the differences:
-
< a > element is the native browser element for redirection, it behaves without any extra javascript functionality and the browser is capable to understand back and forward buttons in the browser
-
< Link > is the react-router-dom React Component. It at the end renders < a > element in HTML and has logic inside of it, it uses react-router-dom API in order to work, once you use it you can take profit of some react-router-dom functionalities related to that library
-
< button > element is another native element in browser, the main difference between < a > and < button > is semantics, < a > is intended to be used with redirections and < button > to execute functions after click
You can redirect with < button > and use onClick in < a > element but semantically will be incorrect.
Semantics are the right using of the elements in HTML
答案2
得分: 0
我认为一个标签正在重定向那里
链接标签也是
当你使用路由器时？然后你可能感觉到变化
我的答案不确定
英文:
i think a tag is redirect there
Link tag too
when you using router? then you feel change maybe
my answer is not sure
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论