Skip to content

update: translate packages/react-router/docs/api/matchPath.md && packages/react-router/docs/api/match.md into Chinese #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Mar 2, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions packages/react-router/docs/api/match.md
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
# match

A `match` object contains information about how a `<Route path>` matched the URL. `match` objects contain the following properties:
一个 `match` 对象中包涵了有关如何匹配 URL 的信息。`match` 对象中包涵以下属性:

- `params` - (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the path
- `isExact` - (boolean) `true` if the entire URL was matched (no trailing characters)
- `path` - (string) The path pattern used to match. Useful for building nested `<Route>`s
- `url` - (string) The matched portion of the URL. Useful for building nested `<Link>`s
- `params` - (object) key/value 与动态路径的 URL 对应解析
- `isExact` - (boolean) `true` 如果匹配整个 URL (没有结尾字符)
- `path` - (string) 用于匹配的路径模式。被嵌套在 `<Route>` 中使用
- `url` - (string) 用于匹配部分的 URL 。被嵌套在 `<Link>` 中使用

You'll have access `match` objects in various places:
你将会在这些地方用到 `match` 对象:

- [Route component](./Route.md#component) as `this.props.match`
- [Route render](./Route.md#render-func) as `({ match }) => ()`
- [Route children](./Route.md#children-func) as `({ match }) => ()`
- [withRouter](./withRouter.md) as `this.props.match`
- [matchPath](./matchPath.md) as the return value
- [Route component](./Route.md#component) 例如 `this.props.match`
- [Route render](./Route.md#render-func) 例如 `({ match }) => ()`
- [Route children](./Route.md#children-func) 例如 `({ match }) => ()`
- [withRouter](./withRouter.md) 例如 `this.props.match`
- [matchPath](./matchPath.md) 例如 返回值

If a Route does not have a `path`, and therefore always matches, you'll get the closest parent match. Same goes for `withRouter`.
如果 Route 没有 `path`,那么将会一直与他最近的父级匹配。这也同样适用于`withRouter`

## null matches

A `<Route>` that uses the `children` prop will call its `children` function even when the route's `path` does not match the current location. When this is the case, the `match` will be `null`. Being able to render a `<Route>`'s contents when it does match can be useful, but certain challenges arise from this situation.
当前路由的 `path` 与当前地址不匹配时,使用 `children` 属性的 `<Route> ` 将调用 `children` 方法。这种情况下, `match` 将为 `null` 。当`<Route>` 中的内容能够被渲染出来时,说明匹配成功,但这种情况是有挑战性的。

The default way to "resolve" URLs is to join the `match.url` string to the "relative" path.
“解析”URL的默认方式是将 `match.url` 字符串连接到“相对”路径。

```js
`${match.url}/relative-path`
```

If you attempt to do this when the match is `null`, you will end up with a `TypeError`. This means that it is considered unsafe to attempt to join "relative" paths inside of a `<Route>` when using the `children` prop.
如果你的匹配为 `null` 时尝试执行此操作,则会出现`TypeError`。它的意思是在使用子级属性时在 `<Route>` 内部加入“相对”路径是不安全的。

A similar, but more subtle situation occurs when you use a pathless `<Route>` inside of a `<Route>` that generates a `null` match object.
当您在生成`null`匹配对象的 `<Route>` 内部使用无路径的 `<Route>` 时。会出现类似但更微妙的情况。

```js
// location.pathname = '/matches'
Expand All @@ -41,4 +41,4 @@ A similar, but more subtle situation occurs when you use a pathless `<Route>` in
)}/>
```

Pathless `<Route>`s inherit their `match` object from their parent. If their parent `match` is `null`, then their match will also be `null`. This means that a) any child routes/links will have to be absolute because there is no parent to resolve with and b) a pathless route whose parent `match` can be `null` will need to use the `children` prop to render.
无路径的 `<Route>` 从它们的父节点继承它们的`match`对象。 如果他们的父`match``null`,那么他们的匹配也是`null`。 这意味着:a)任何子路由/链接必须是绝对的,因为没有父级去解决,并且b)父级路径`match`可以是`null`的无路径路由将需要使用子级属性进行渲染。
14 changes: 6 additions & 8 deletions packages/react-router/docs/api/matchPath.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# matchPath

This lets you use the same matching code that `<Route>` uses except outside of the normal render cycle, like gathering up data dependencies before rendering on the server.
这使你可以使用与 `<Route>` 相同的匹配代码,除正常渲染周期外,例如,在服务端渲染之前收集数据依赖。

```js
import { matchPath } from 'react-router'
Expand All @@ -14,18 +14,16 @@ const match = matchPath('/users/123', {

## pathname

The first argument is the pathname you want to match. If you're using
this on the server with Node.js, it would be `req.path`.
第一个参数是你想要匹配的 pathname。 如果您正在服务器上使用 Node.js ,它将是 `req.path`。

## props

The second argument are the props to match against, they are identical
to the matching props `Route` accepts:
第二个参数是匹配的 props,它们与 `Route` 接受的 props 相同:

```js
{
path, // like /users/:id
strict, // optional, defaults to false
exact // optional, defaults to false
path, // 例如 /users/:id
strict, // 选填, 默认为 false
exact // 选填, 默认为 false
}
```