hitchhiker部署_Hitchhiker的React Router v4指南：无限远的递归路径！

最新推荐文章于 2022-09-16 10:59:27 发布

cumichun6193

最新推荐文章于 2022-09-16 10:59:27 发布

阅读量193

点赞数

文章标签： python java vue js javascript ViewUI

原文链接：https://www.freecodecamp.org/news/hitchhikers-guide-to-react-router-v4-21c99a878bf8/

版权

hitchhiker部署

Welcome to the third part of the Hitchhiker’s Guide to React Router v4. In this article we’re going to focus on recursive paths. If you’ve missed the first two parts, you can find part 1 here and part 2 here.

欢迎阅读《 Hitchhiker React Router v4指南》的第三部分。在本文中，我们将重点介绍递归路径。如果你已经错过了前两个部分，你可以找到第1部分在这里和第2部分在这里。

什么是递归路径？ (What are recursive paths?)

Recursive paths are nothing more than paths that are composed of nested routes that render the same component to show nested views.

递归路径无非是由嵌套路径组成的路径，这些路径呈现相同的组件以显示嵌套视图。

Example: http://evedes.rockz/Topics/1/2/3/2/1

示例： http://evedes.rockz/Topics/1/2/3/2/1

It’s commonly used to do “breadcrumbs” in websites — a navigation pattern that shows where the user is in a site organic structure, a social network friends relationship tree, solve a lot of complex graph problems, analytics, or trace any kind of information that depends on the last path. This can be the case, for example, of a computer game where you go from one room to another and the path you took to get there needs to be tracked for some reason.

它通常用于在网站上做“面包屑” —一种导航模式，显示用户在站点有机结构中的位置，社交网络朋友关系树，解决许多复杂的图形问题，分析或跟踪任何形式的信息取决于最后一条路。例如，在一个电脑游戏中，您可能会从一个房间转到另一个房间，而出于某种原因，您需要跟踪到达该房间的路径，就可能是这种情况。

Excited? Say “yeah”! ?

激动吗说耶”！？

So, let’s do some changes in our application to test this pattern applied in React Router v4.

因此，让我们在应用程序中进行一些更改以测试在React Router v4中应用的这种模式。

目标 (The Objective)

So, the idea here is to transform our Topic List.

因此，这里的想法是改变我们的主题列表。

Instead of having a list of Topics that are matched and that the user can navigate to and see each Topic Detail and get back (seen in Part I of this guide), let’s do a nested route that starts at Topic 1 and shows the user which Topics are related to it — by showing a list of Links which can be clicked to navigate to the next related Topic Detail. Each time you choose a topic, you can navigate to it, see it’s details, and see which topics are related to it.

让我们做一个嵌套的路由，从主题1开始并向用户显示，该主题没有匹配的主题列表，并且用户可以导航到该主题列表并查看每个主题详细信息并返回(参见本指南的第一部分 )。主题与此相关-通过显示链接列表，可以单击链接以导航到下一个相关的主题详细信息。每次选择一个主题时，您都可以导航至该主题，查看其详细信息以及与之相关的主题。

routes.js (routes.js)

So in routes.js we’ve deleted the import of the TopicDetails component and corrected the routes to render the TopicList component when the path is /Topics/:topicId, besides the existing Route to /Topics.

因此，在routes.js我们已经删除组件TopicDetails的进口和纠正呈现题目列表组件的路由时的路径是/主题/：topicId，除了现有的布线 /主题 。

Both will render the same component with different match properties.

两者都会渲染具有不同匹配属性的相同组件。

TopicList.js (TopicList.js)

Besides the small correction above, I’ve heavily refactored the TopicList.js file. Let’s have a look at what we have there:

除了上面的细微修改外，我还大量重构了TopicList.js文件。让我们来看看我们那里有什么：

We’ve imported Route and Link from the react-router-dom package because we’re going to invoke it later in the code.

我们已从react-router-dom包中导入Route和Link ，因为稍后将在代码中调用它。

We’ve created an array of objects which contains the list of topics. Each topic has a relatedTopics array that promotes the relationship among them.

我们创建了一个包含主题列表的对象数组。每个主题都有一个relatedTopics数组，可促进它们之间的关系。

We’ve created a find function that receives the topic’s id as an argument and returns the item or topic that corresponds unequivocally to the id passed into it.

我们创建了一个find函数，该函数接收主题ID作为参数，并返回与传递给它的ID明确对应的项目或主题。

The parseInt(id, 10) usage makes sure that even if the argument passed into the find function is a string, it becomes an integer on the base 10 (decimal number system).

parseInt(id，10)的用法可确保即使传递给find函数的参数是一个字符串，它也将成为以10为底的整数(十进制系统)。

Observe that our topics id and relatedTopics values are primitive integers.

请注意，我们的主题id和relatedTopics值是原始整数。

To learn more about parseInt take a look HERE.

要了解有关parseInt的更多信息，请点击这里。

The component TopicDetail starts by defining the variable topic. This will store the result of the function find which grabs the id that comes from the match object (router) when the component is invoked. It then returns the topic object that corresponds to that id.

组件TopicDetail首先定义变量topic 。这将存储函数查找的结果，该结果将在调用组件时获取来自匹配对象(路由器)的ID 。然后返回主题对象对应于该id 。

With that topic object stored, it returns the Details of the topic and creates a dynamic unordered list with the related topics id and name.

存储该主题对象后，它将返回该主题的详细信息 ，并创建一个具有相关主题id和name的动态无序列表。

Let’s see this in the browser:

让我们在浏览器中看到这一点：

Nice! It’s working!

真好！工作正常！

So, when you click one of the links shown, it routes you to the next topic id:

因此，当您单击显示的链接之一时，它将带您到下一个主题id ：

Wow! This route is outside of the routes.js file! This is new. Observe that technically you can create routes inside any component.

哇！该路由在routes.js文件之外！这是新的。从技术上讲，您可以在任何组件内创建路由。

Do not forget that isExact is false because the url doesn’t entirely match the path from the /Topics/:topicId as previously defined in the routes.js component.

不要忘记isExact为false，因为url与/ routes /：topicId中的路径并不完全匹配route.js组件中先前定义的路径。

In the end, we define and export the TopicList component which invokes TopicDetail with the match object above. But, as in each instance of TopicDetails when you’re triggering a Route, TopicDetail gets re-rendered with new match properties supplied by the Router at each instance.

最后，我们定义并导出它调用TopicDetail与匹配对象上方的题目列表组件。但是，就像在触发路由时在TopicDetails的每个实例中一样， TopicDetail将使用每个实例中路由器提供的新匹配属性重新呈现。

So now we are done! ?

现在我们完成了！？