hitchhiker部署

嘿! 欢迎来到《 React Router v4旅行者指南》，第二部分！ (Hey! Welcome to the Hitchhiker’s Guide to React Router v4, Part II!)

Now that we’ve set the ball rolling with our first small App, let’s focus on your three travel mates: match, location and history.

现在，我们已经设置的球滚动我们的第一个小的应用程序，让我们专注于你的三个旅游队友： 比赛 ， 地理位置和历史 。

What happens if you get inside your Home Component code and put a console.log there to check the props?

如果进入内部组件代码并在其中放置console.log来检查道具，会发生什么情况？

Router introduces into your component the following objects:

路由器将以下对象引入您的组件：

Wow! Where does that came from? ?

哇！ 那是哪里来的 ？

Well, every view, component, or whatever that’s wrapped by Router has these objects. <Router/> does its job as an Higher Order Component and wraps your components or views and injects these three objects as props inside them.

嗯，每个视图，组件或路由器包装的任何对象都有这些对象。 <Router />作为高阶组件执行其工作，并包装您的组件或视图，并将这三个对象作为道具插入其中。

So… why are they there and what use can I make of them? ?

那么……为什么它们在那里？我能对它们有什么用？ ？

They’ll be your best friends! Trust me! ?

他们将成为您最好的朋友！ 相信我！ ？

比赛 (Match)

The match object contains information about how a <Route path> matched the URL.

匹配对象包含有关<Route path>如何与URL匹配的信息。

• params: (object), key/value pairs parsed from the URL corresponding to the dynamic segments of the path

  参数 ：(对象)，从对应于路径动态段的URL解析的键/值对

• isExact: (boolean), true if the entire URL was matched (no trailing characters)

  isExact ：(布尔值)，如果整个URL都匹配，则为true(无尾字符)

• path: (string), the path pattern used to match. Useful for building nested routes. We’ll take a look at this later in one of the next articles.

  path ：(字符串)，用于匹配的路径模式。 对于构建嵌套路线很有用。 我们稍后将在下一篇文章中对此进行介绍。

• url: (string), the matched portion of the URL. Useful for building nested links.

  url ：(字符串)，URL的匹配部分。 对于构建嵌套链接很有用。

So in the Home component we have this match object:

因此，在Home组件中，我们有一个match对象：

isExact is true because the entire URL was matched, the params object is empty because we didn’t pass anything into it, the path and the url key values are equal confirming that isExact is true.

isExact为true是因为整个URL 都已匹配， params对象为空，因为我们没有向其中传递任何内容，因此路径和url键值相等，从而确认isExact为true。

Now let’s take a look at the TopicList View:

现在让我们看一下TopicList视图 ：

Nothing new until now, same story as in the Home View, showing the path and the url of TopicList.

到目前为止，没有什么新鲜事物，与主视图中的故事相同，显示了TopicList的路径和url 。

But what if we take a look at TopicDetails?

但是，如果我们看一下TopicDetails怎么办 ？

Okay, what do we have here?

好吧，我们这里有什么？

isExact continues to be true because the entire URL was matched. params object brings the topicId info that was passed into the component.

因为整个URL都匹配，所以isExact仍然为true。 params对象将传递到组件中的topicId信息。

Pay attention to how the topicId is a variable.

请注意topicId如何是变量。

But where does it assume the Topic1 value?

但是，假定Topic1值在哪里呢？

Simple, you’re invoking it in an explicit way in TopicList Links.

很简单，您可以在TopicList Links中以显式方式调用它。

Check how we’ve used match for the TopicList to know its URL.

检查我们如何使用TopicList的 match来了解其URL。

This link could be dynamic. Later on we’ll do an example where you Link to a relative path where you don’t know previously if it’s Topic1 or Topic3520.

该链接可能是动态的 。 稍后，我们将做一个示例，其中您链接到一个相对路径，您之前不知道它是Topic1还是Topic3520 。

But…

但…

In which situation is the isExact false?

isExact在哪种情况下为假？

Well… let me give you an example:

好吧...让我举个例子：

In this situation we’ve introduced the /HelloWorldSection into the browser URL.

在这种情况下，我们已将/ HelloWorldSection引入浏览器URL。

What happens is that the Router doesn’t know the full path to the HelloWorldSection so it routes you up until where it knows the way.

发生的情况是路由器不知道通往HelloWorldSection的完整路径，因此它将您路由到知道路径的地方。

isExact shows false telling you precisely that the “entire URL was not matched”.

isExact会显示false，准确地告诉您“ 整个URL不匹配 ”。

This is very useful, as you’ll see as soon as you start doing SPAs with RRv4!

这非常有用，当您开始使用RRv4进行SPA时会看到！

Just to finish our approach to match check this out:

只需完成我们的匹配方法，请检查以下内容：

We’ve used the match.params.topicId to print in the screen our topic name.

我们使用match.params.topicId在屏幕上打印主题名称。

This is one of the most common usages for match.

这是match最常见的用法之一。

Of course it has a multitude of applications. Suppose we need to fetch an API with this topicId information. ?

当然，它具有多种应用。 假设我们需要获取带有此topicId信息的API。 ？

位置 (Location)

The location object represents where the app is now, where you want it to go, or even where it was.

location对象代表应用程序现在所在的位置 ，您希望其运行的位置，甚至是以前的位置。

It’s also found on history.location but you shouldn’t use that because it’s mutable.

在history.location上也可以找到它，但是您不应使用它，因为它是可变的。

A location object is never mutated so you can use it in the lifecycle hooks to determine when navigation happens. This is really useful for data fetching or DOM side effects.

位置对象永远不会发生突变，因此您可以在生命周期挂钩中使用它来确定何时进行导航。 这对于数据获取或DOM副作用非常有用。

Let’s console.log(location) inside Home View:

让我们在Home View中进行 console.log(location) ：

Let’s not deep dive a lot and keep with its simple functionality.

让我们不要深入研究并保持其简单功能。

You have the pathname key/value.

您具有路径名键/值。

You can use it for example to check if pathname has changed:

例如，可以使用它来检查路径名是否已更改：

You can <Link/> or <Redirect /> to it. You can do an history.push or history.replace as we’re going to see later.

您可以<link />或<redirect />到它。 您可以进行history.push或history.replace，稍后我们将看到。

You can create a custom object and use it

您可以创建一个自定义对象并使用它

• <Redirect to={locationX} />

  <重定向到= {locationX} />

• <Link to={locationX}/>

  <链接到= {locationX} />

• history.push(locationX)

  history.push(locationX)

You can also pass it into <Route/> and <Switch /> components.

您还可以将其传递到<Route />和<Switch />组件中。

This will prevent them from using the actual location in the router’s state. Maybe you want to trick a Component to render in a different location than the real one ?

这样可以防止他们在路由器状态下使用实际位置。 也许您想欺骗一个组件以在与实际位置不同的位置进行渲染？

Enough of location now…

现在位置足够…

Let’s move to history!

让我们走向历史 ！

历史 (History)

The history object allows you to manage and handle the browser history inside your views or components.

历史记录对象使您可以管理和处理视图或组件中的浏览器历史记录。

• length: (number), the number of entries in the history stack

  length ：(数字)，历史堆栈中的条目数

• action: (string), the current action (PUSH, REPLACE or POP)

  action ：(字符串)，当前操作(PUSH，REPLACE或POP)

• location: (object), the current location

  location ：(对象)，当前位置

• push(path, [state]): (function), pushes a new entry onto the history stack

  push(path，[state]) ：(函数)，将新条目推入历史堆栈

• replace(path, [state]): (function), replaces the current entry on the history stack

  replace(path，[state]) ：(函数)，替换历史记录堆栈上的当前条目

• go(n): (function), moves the pointer in the history stack by n entries

  go(n) ：(函数)，将历史记录堆栈中的指针移动n个条目

• goBack(): (function), equivalent to go(-1)

  goBack() ：(函数)，等效于go(-1)

• goForward(): (function,) equivalent to go(1)

  goForward() ：(函数)等效于go(1)

• block(prompt): (function), prevents navigation

  块(提示) ：(功能)，防止导航

So let’s console.log the history object in our Home View and see what it shows:

因此，让console.log在主视图中 记录历史记录对象，并查看其显示的内容：

Okay, exactly what we were expecting.

好吧，正是我们所期望的。

It tells us that we’ve arrived here with a PUSH action, that the length of the object is 40 (as you navigate thru your app history grows to 50 and stops there, discarding the older entries and keeping its size each time the app pushes another history entry into the object).

它告诉我们，我们已按PUSH动作到达此处，对象的长度为40 (当您浏览应用历史记录时 ，该历史记录增长到50，然后停在那里，丢弃旧条目并在每次应用按时保持其大小该对象的另一个历史记录条目)。

It gives us the location information.

它为我们提供了位置信息。

Again, the history object is mutable. Therefore it is recommended to access the location from the render props of Route, not from history.location.

同样， 历史对象是可变的 。 因此，建议从Route的渲染道具访问位置 ，而不是从history.location访问 。

This ensures your assumptions about React are correct in lifecycle hooks.

这可以确保您对React的假设在生命周期挂钩中是正确的。

For example:

例如：

Typically you can use it to change the browser URL path.

通常，您可以使用它来更改浏览器URL路径。

In the example below we avoid <Link> and create a button that does a history push:

在下面的示例中，我们避免使用<Link>并创建一个执行历史记录推送的按钮：

Of course you can use it to trigger the URL change after some data fetching or side effects.

当然，您可以使用它来触发某些数据获取或副作用后的URL更改。

It’s comfortable to use it in the middle of JSX where you don’t want to invoke components. You can simply return a history push and trigger Router to update the Browser URL.

在不需要调用组件的JSX中间使用它很舒服。 您可以简单地返回 历史记录推送并触发路由器 更新浏览器URL。

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

I think that by this time you already have a good idea on how to use match, location and history.

我认为到这个时候，您已经对如何使用比赛 ， 位置和历史有了个好主意。

I didn’t make any changes to our initial boilerplate, so feel-free to play with it in the same repo supplied in Part 1 of this guide.

我没有对最初的样板进行任何更改，因此可以在本指南第1部分提供的相同存储库中随意使用它。

05.参考书目 (05. 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 2 of a series called “Hitchhiker’s Guide to React Router v4”

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

• Part I: Grok React Router in 20 minutes

  第一部分：20分钟内的Grok React Router

• Part III: recursive paths, to the infinity and beyond!

  第三部分：无穷远的递归路径！

• Part IV: route config, the hidden value of defining a route configuration array

  第四部分： 路由配置，定义路由配置数组的隐藏值

? Thank you very much!

？ 非常感谢你！

翻译自: https://www.freecodecamp.org/news/hitchhikers-guide-to-react-router-v4-4b12e369d10/

hitchhiker部署