使用React Router v4进行声明式路由

在讨论声明性路由之前,让我们看一下许多框架已经实施了多年的最常见的路由方法。

您认为以下两个文件有什么共同点?

两种实现(.NET和PHP)都将某些url /路径映射到将运行某些代码(AKA控制器)的文件。 他们的共同点是,所有路由都放置在一起并在应用呈现任何内容之前加载。

代管

将所有路由放在一起会破坏同位原则。 在大多数React社区中,共址托管是一种最佳实践。 共同定位的想法是,您应该按关注而不是实现来对事物进行分组。 例如,我们将所有CSS与关注特定CSS的组件放置在一起,而不是将所有CSS放在一个文件夹中。 与其将所有GraphQL查询放置在同一文件夹中,不如将它们与受其约束的组件一起放置。 因此,路由不应例外。

其他框架(如Rails,Express,Ember和Angular)也采用相同的方法,如上面显示的.NET和PHP示例。 我们为什么要以相同的方式对所有路线进行分组?

共置代码使维护应用程序的代码库变得更加容易。

版本4之前的React Router遵循与上述.NET和PHP实现相同的原理。 它将路径和组件之间的映射保留在单独的文件中。 例:

然后,您可以将路由文件导入组件树顶部的某个位置:

想象一个通过身份验证的用户的Messenger应用程序。 在React Router <版本4中,组件树可能看起来像这样:

这种方法称为静态路由,您需要预先声明路由,然后将其导入顶层。

考虑到以前的Messenger应用程序,如果我们使用声明式路由(如React Router版本4),则组件树如下所示:

我们将路线与必须渲染的组件放在一起。 这种方法称为动态路由,它是在应用呈现时发生的,而不是在单独的配置文件中发生的。

现实世界的例子

假设您要为以下Messenger应用程序实现路由。 请注意, 该页面是主从页面 ,这意味着当您与用户选择给定主题时,特定的对话会与主题一起显示。

以下粉红色区域是整个应用程序通用的部分,与url无关:

路径“ / messages”将显示以下“线程”组件:

当用户导航到路径“ / messages /:username”时,它将显示 踩踏的“线程”组件和“对话”组件

组件树可能类似于下图。 给定URL http:// localhost:3000 / messages / superuser23,该应用程序将不会呈现Login组件(考虑到用户已登录)。 相反,它将同时呈现Threads和Conversation组件。

如果您想成功利用React Router 4和React所采用的声明性方法,则应该在React中实现动态路由。

我们在React的新手开发人员中看到的一个常见错误是,在其他框架和工具中经验丰富的一个错误是,即使这些模型不合适,他们也会尝试引入他们知道的思维模型。 在某些情况下(并非总是如此),这些模型在React中不是正确的方法。 路由就是其中一种情况。 如果您发现自己将所有路线都放置在React应用程序中的同一位置(例如,路线配置文件),请考虑将您的Route组件共放置在树中自然放置的位置。

本文是ReactJS.Academy培训材料的一部分。

https://reacttraining.com/react-router/web/