hitchhiker部署_《 Hitchhiker的React Router v4指南》：路由配置的隐藏值

hitchhiker部署

Welcome to the Hitchhiker’s Guide to React Router v4, Part IV!

欢迎来到《 React Router v4旅行者指南》，第四部分！

Now that we’ve learned about recursive routes, let’s get back to our initial boilerplate, to avoid mixing concerns, and learn how to create a route configuration array.

既然我们已经了解了递归路由，那么让我们回到最初的样板中，避免混淆的问题，并学习如何创建路由配置数组。

So, just to recap a bit what we did in the beginning, let’s take a look at our initial routes.js file:

因此，让我们回顾一下开始时所做的事情，让我们看一下我们最初的routes.js文件：

Our Routes component is returning a div with a NavBar and a Switch where we’ve defined all the routes of our App.

我们的Routes组件将返回一个带有NavBar和Switch的div ，在其中定义了应用程序的所有路由。

Our first step in this Part 4 will be to define a routes array.

在第4部分中，我们的第一步将是定义一个路由数组。

路线数组 (Routes Array)

I’ve taken a look at our routes and created this array that defines each route and sub-route we had in our application.

我看了看我们的路线，并创建了这个数组，该数组定义了我们在应用程序中拥有的每个路线和子路线。

Nice! Now what?!? ?

真好！怎么办？！？？

重构旧的硬编码路由 (Refactor the Old Hardcoded Routes)

Now let’s clean our hardcoded routes and the Switch!

现在，让我们清理我们的硬编码路由和Switch！

Yeah! Goodbye all those lines of code. What are we really doing?

是的再见所有这些代码行。我们到底在做什么？

Well, we’re mapping over the map array using an ES6 (fat arrow) callback to return an abstract component called <MakeRouteWithSubRoutes />. We are passing into it a key (just for React indexing purposes) and we are spreading the route info also into it.

好吧，我们正在使用ES6(胖箭头)回调在map数组上进行映射，以返回名为<MakeRouteWithSubRoutes />的抽象组件。我们在其中传递了一个密钥(仅用于React索引目的)，并且还在其中传播了路线信息。

<MakeRouteWitheSubRoutes />组件 (<MakeRouteWitheSubRoutes /> Component)

In the meantime, we need to create that component. I’ve decided to create it apart and import it into the routes.js file.

同时，我们需要创建该组件。我决定分开创建它，并将其导入routes.js文件。

Okay, this <MakeRouteWithSubRoutes/> Component is picking up each route you pass into it and returning a React Router <Route/> Component.

好的，这个<MakeRouteWithSubRoutes />组件将拾取传递给它的每条路由，并返回一个React Router <Route />组件。

As props, we have the path and the render method, which will invoke the route.component you want to render (then passing into it the spread props and the sub-routes that it needs to know).

作为道具，我们具有路径和render方法，它们将调用您要渲染的route.component (然后将传播的道具和它需要知道的子路线传递到其中)。

This routes are coming from the route config array — got it? Nice! ?

该路由来自路由配置数组-知道吗？真好！？

TopicList(子路由) (TopicList (Sub-Routing))

This being said, let’s take a loot at the TopicList component because it’s the one receiving sub-routes from the route config array:

话虽这么说，让我们来看看TopicList组件，因为它是从路由配置数组中接收子路由的一个：

So, what’s happening here? Our TopicList now is importing the <MakeRouteWithSubRoutes/> component and reusing with routes it has received.

那么，这是怎么回事？我们的题目列表现在导入<MakeRouteWithSubRoutes />成分和与它已经接收的路由重新使用。

It also does a routes.map over the sub-routes and repeats the process done in the routes.js file.

它还在子路由上执行一个route.map ，并重复在route.js文件中完成的过程。

Take a minute to understand it and play with it!

花一点时间来理解它并玩它！

越来越多的子路由 (More and More Sub-Routing)

As you can see, this works quite well. It’s abstracted, there’s separation of concerns. The <MakeRoutesWithSubRoutes/> is a quite easy to use stateless component or function which doesn’t care about the routing content. It just routes whatever you feed to it.

如您所见，这很好。它是抽象的，关注点分离。 <MakeRoutesWithSubRoutes />是一个非常容易使用的无状态组件或函数，不需要关心路由内容。它只是路由您提供的任何内容。

What if we wanted to do more sub-routing?

如果我们想做更多的子路由怎么办？

Easy peasy! Just keep growing or redesigning your routes configuration array!

十分简单！只要保持增长或重新设计您的路线配置阵列即可！

See? The routes of the /Topics/:topicId could simply be an array like its parent routes. But I’ve decided to do better and invoke a function that calls an API and returns a new array of routes (just imagine it fetches the API ?).

看到？ / Topics /：topicId的路由可以像其父路由一样简单地是一个数组。但是我决定做得更好，并调用一个函数，该函数调用API并返回新的路由数组(想像一下它获取了API？)。

So how can we check that in the App?

那么我们如何在App中检查呢？

Let’s put a console.log inside the TopicDetail component and check what it is receiving:

让我们将console.log放入TopicDetail组件中，并检查其接收的内容：

I’m invoking routes() in console.log because now this sub-route is a function! Remember? All good! ?

我正在console.log中调用route() ，因为现在此子路由是一个函数！记得？都好！？

Yeah Ma! We’ve done it! We’re receiving the routes dynamically and propagating those into our sub-routes and components. This is so great!

是的，马！我们做到了！我们正在动态接收路线，并将其传播到我们的子路线和组件中。太好了！

NoMatch和歧义路线 (NoMatch And Ambiguous Routes)

Wait! Where’s our NoMatch Component?

等待！我们的NoMatch组件在哪里？

Okay, let’s introduce it into our route config array:

好的，让我们将其介绍给我们的路由配置数组：

Observe that :WhereTheHeckIsThat is a variable because it has the colon before it.

观察到：WhereTheHeckIs那是一个变量，因为它前面有冒号。

What should we expect?

我们应该期待什么？

Let’s see it in action:

让我们来看看它的作用：

Wow! As a matter of fact it’s rendering the NoMatch but it’s also rendering the Home View. Why?

哇！事实上，它正在渲染NoMatch，但同时也在渲染Home View 。为什么？

Well, what’s happening is that in our initial boilerplate we had a <Switch /> that was picking up the first <Route /> that matches the path remember?

好吧，发生的事情是，在我们的初始样板中，我们有一个<Switch /> ，它正在拾取与所记住的路径相匹配的第一个<Route /> ？

So now, as we do not have the switch, it can match more than one path at a time!

所以现在，由于我们没有开关，因此它一次可以匹配多个路径！

These are called Ambiguous Routes. Router matched the /Home and at the same time /:WhereTheHeckIsThat because it’s kind of a wildcard that accepts everything.

这些称为歧义路线。 Router匹配了/ Home并同时匹配了/ ：WhereTheHeckIsThat，因为它有点像通配符，可以接受所有内容。

How to we correct that?

我们该如何纠正？

Simple: grab <Switch /> back!

简单：抢回<Switch /> ！

As you can see above, now the /Home is rendered alone, because <Switch /> found it and returned it immediately.

正如您在上面看到的，现在/ Home是单独呈现的，因为<Switch />找到了它并立即返回了它。

If you put some unknown path in the URL, it triggers the :/WhereTheHeckIsThat and renders the NoMatch component as a default.

如果在URL中放置一些未知路径，它将触发：/ WhereTheHeckIsThat并将NoMatch组件呈现为默认值。

Great job! Everything is working as we’d expected and now we have a powerful route array configuration which allows us to have a lot of flexibility.

很好！一切都按预期工作，现在我们拥有功能强大的路由阵列配置 ，使我们拥有很大的灵活性。

This really is the hidden value of having an abstraction and defining a route configuration array!

这确实是具有抽象并定义路由配置数组的隐藏价值！

最后但并非最不重要的 (Last but not least)

This is the end of the Hitchhiker’s Guide To React Router v4.0!

Hitchhiker的React Router v4.0指南到此结束！

There is still are some stuff to pay attention to, but I prefer to let you deep dive a little bit in the boilerplates we’ve built and look for what you need in the React router website.

仍然有一些东西要注意，但是我更喜欢让您深入研究我们制作的样板并在React Router 网站上寻找您需要的东西。

I had so much fun doing this Guide that I think I’m going to start writing more and more :)

我在执行本指南时非常开心，以至于我将开始越来越多地撰写:)

It was good not only because I was able to teach you something but also because I’ve also learned a lot in this process.

这很好，不仅因为我能够教你一些东西，而且因为我在此过程中也学到了很多东西。

GitHub回购 (GitHub Repo)

The changes I’ve made to the application, to produce this article, can be found in my GitHub repo for Part 4.

在本文的第4部分的GitHub存储库中，可以找到我对应用程序所做的更改(以生成本文)。

参考书目 (Bibliography)

To make this article I’ve used the React Router documentation that you can find here.

为了撰写本文，我使用了React Router文档，您可以在这里找到。

All the other sites I’ve used are linked along the document to add info or provide context to what I’ve tried to explain to you.

我使用过的所有其他网站都与文档链接在一起，以添加信息或提供与我尝试向您解释的内容的上下文。

This article is part 4 of a series called “Hitchhiker’s Guide to React Router v4”

本文是称为“ Hitchhiker的React Router v4指南”系列的第4部分。

Part I: Grok React Router in 20minutes
第一部分：20分钟内的Grok React Router
Part II: [match, location, history] — your best friends!
第二部分：[比赛，位置，历史]-您最好的朋友！
Part III: recursive paths, to the infinity and beyond!
第三部分：无穷远的递归路径！

? Thank you very much!

？非常感谢你！