【问题标题】：How does React router works and what is the difference between <link> and<Route>React 路由器是如何工作的，<link> 和 <Route> 有什么区别
【发布时间】：2018-11-21 07:20:46
【问题描述】：

react router 中的 Link 和 Route 有什么区别？我们在哪里使用它们，还是一起使用还是分开使用？在哪里可以找到真正专业的 React Web 开发教程？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

Route 和 Link 组件旨在一起用于完成应用程序中的不同任务。首先，React Router 库旨在实现两件事： 1. 确保在 URL 栏中捕获状态转换。 2.通过有状态的URL地址访问时，确保应用程序从正确的状态开始。

链接组件的作用 Link 组件是一种在应用程序中转换路由状态的方法。所以如果你点击一个链接组件，就会激活一个路由状态。例如：

<Link to="/example" />

将注册应用程序处于“/example”状态。此时，由组件来呈现适当的内容。

<Route path="/example" render={Profile] />

所以简而言之，Link 组件负责从状态到状态（页面到页面）的转换，而 Route 组件负责充当开关，根据路由状态显示某些组件。

库使用的最佳示例可以在https://reacttraining.com/react-router/找到

【讨论】：

您将如何进行动态路由？例如 '/product/49' 你必须传递一个 ID 和一个 prop（类型对象）。
没关系，我正在观看您提供的链接上的视频。感谢您的出色回答。
很高兴为您提供帮助

【解决方案2】：

链接和路线

<Link/> 是您可以用来导航路线的元素。

<Route/>，它最基本的职责是在某个位置与路线的路径匹配时渲染一些 UI。

它们是分开使用的。链接取决于 Route 的位置。但是Route可以不用Link。

反应路由器：https://reacttraining.com/react-router/web/guides/philosophy

React JS 教程： https://reactjs.org/docs/hello-world.html

【讨论】：

【解决方案3】：

我将通过一个例子来解释，如果我有：

<Router>
        <Route path = "/" component = {LoginModule} />
        <Route path = "/Register" component = {RegisterModule}/>
</Router>

如果我转到 URL localhost:3000，它将呈现登录模块。毫无疑问。

但是如果我转到 URL localhost:3000/Register，它将在同一页面上的登录模块下方呈现登录和注册模块。这是因为 /Register 里面也有 '/'。

这可以通过以下方式解决：

<Router>
        <Route exact = {true} path = "/" component = {LoginModule} />
        <Route path = "/Register" component = {RegisterModule}/>
</Router>

【讨论】：

【解决方案4】：

一个不太专业的解释：

Route 有助于构建路线。一次创建路线就足够了。例如：

    <Route exact path="/articles"> <Articles /> </Route>

表示“/articles”路由已创建，您不必在其他组件中再次创建它。这就是为什么Route一般会放在main组件里面，一般是“App”。

由于上述第一个原因，如果您想访问“/articles”，则需要在其他组件中使用链接标签。如果我们使用“a”标签，它会使浏览器发送一个全新的html页面。这正是我们不想要的，因为我们只希望网页的某些部分（也称为“组件”）发生变化，而不是所有页面。

【讨论】：

【解决方案5】：

通俗地说，我们可以理解如下所述的区别：

a)Routes 负责在其路径与当前 URL 匹配时呈现 UI，因为 Links 类似于 HTML 中用于访问路由路径的锚标记。

b) 路由涉及其中的组件，而链接仅涉及已由路由定义的路径

c) 路由是独立的实体，而链接依赖于路由。

【讨论】：