Skip to content

Commit

Permalink
Merge pull request justjavac#23 from Jasenpan1987/master
Browse files Browse the repository at this point in the history
翻译了 context-router, history, location和match部分
  • Loading branch information
LeoAshin authored Apr 2, 2017
2 parents a28864a + 159ab9f commit 9ad2d35
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 57 deletions.
4 changes: 2 additions & 2 deletions packages/react-router/docs/api/context.router.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# context.router

React Router uses `context.router` to facilitate communication between a `<Router>` and its descendant [`<Route>`](Route.md)s, [`<Link>`](../../../react-router-dom/docs/api/Link.md)s, [`<Prompt>`](Prompt.md)s, etc.
React Router 使用 「context.router」来实现父 `<Router>` 与子 [`<Router>`](Route.md)`<Router>`[`<Link>`](../../../react-router-dom/docs/api/Link.md),或是 `<Router>`[`<Prompt>`](Prompt.md) 之间的信息传递。

`context.router` should not be considered public API. Since context itself is an experimental API and may change in a future release of React, you should avoid accessing `this.context.router` directly in your components. Instead, you can access the variables we store on context through the props that are passed to your [`<Route>`](Route.md) component or a component wrapped in [`withRouter`](withRouter.md).
`context.router` 不应作为一个公开的API,因为 `context.router` 本身是一个实验性的API,并有可能在以后随着 React 的改变而发生改变,建议你在组件中尽可能少去直接使用 `this.context.router` 这种写法。而你通过 [`<Route>`](Route.md) 组件或是使用 [`withRouter`](withRouter.md) 来包裹的组件来传递变量,并且使用这些变量。
50 changes: 26 additions & 24 deletions packages/react-router/docs/api/history.md
Original file line number Diff line number Diff line change
@@ -1,45 +1,47 @@
# history

The term "history" and "`history` object" in this documentation refers to [the `history` package](https://github.com/ReactTraining/history), which is one of only 2 major dependencies of React Router (besides React itself), and which provides several different implementations for managing session history in JavaScript in various environments.
本文档中的「history」以及「`history`对象」请参照 [`history`](https://github.com/ReactTraining/history)中的内容。
History 是 React Router 的两大重要依赖之一(除去 React 本身),在不同的 Javascript 环境中,`history` 以多种形式实现了对于 session 历史的管理。

The following terms are also used:
我们会经常使用以下术语:

- "browser history" - A DOM-specific implementation, useful in web browsers that support the HTML5 history API
- "hash history" - A DOM-specific implementation for legacy web browsers
- "memory history" - An in-memory history implementation, useful in testing and non-DOM environments like React Native
- browser history - history 在 DOM 上的实现,经常使用于支持 HTML5 history API 的浏览器端。
- hash history - history 在 DOM 上的实现,经常使用于旧版本浏览器端。
- memory history - 一种存储于内存的 history 实现,经常用于测试或是非 DOM 环境(例如 React Native)。

`history` objects typically have the following properties and methods:
`history` 对象通常会具有以下属性和方法:

- `length` - (number) The number of entries in the history stack
- `action` - (string) The current action (`PUSH`, `REPLACE`, or `POP`)
- `location` - (object) The current location. May have the following properties:
- `pathname` - (string) The path of the URL
- `search` - (string) The URL query string
- `hash` - (string) The URL hash fragment
- `state` - (string) location-specific state that was provided to e.g. `push(path, state)` when this location was pushed onto the stack. Only available in browser and memory history.
- `push(path, [state])` - (function) Pushes a new entry onto the history stack
- `replace(path, [state])` - (function) Replaces the current entry on the history stack
- `go(n)` - (function) Moves the pointer in the history stack by `n` entries
- `goBack()` - (function) Equivalent to `go(-1)`
- `goForward()` - (function) Equivalent to `go(1)`
- `block(prompt)` - (function) Prevents navigation (see [the history docs](https://github.com/ReactTraining/history#blocking-transitions))

## history is mutable
- `length` -( number 类型)指的是 history 堆栈的数量。
- `action` -( string 类型)指的是当前的动作(action),例如 `PUSH``REPLACE` 以及 `POP`
- `location` -( object类型)是指当前的位置(location),location 会具有如下属性:
- `pathname` -( string 类型)URL路径。
- `search` -( string 类型)URL中的查询字符串(query string)。
- `hash` -( string 类型)URL的 hash 分段。
- `state` -( string 类型)是指 location 中的状态,例如在 `push(path, state)` 时,state会描述什么时候 location 被放置到堆栈中等信息。这个 state 只会出现在 browser history 和 memory history 的环境里。
- `push(path, [state])` -( function 类型)在 hisotry 堆栈顶加入一个新的条目。
- `replace(path, [state])` -( function 类型)替换在 history 堆栈中的当前条目。
- `go(n)` -( function 类型)将 history 对战中的指针向前移动 `n`
- `goBack()` -( function 类型)等同于 `go(-1)`
- `goForward()` -( function 类型)等同于 `go(1)`
- `block(prompt)` -( function 类型)阻止跳转,(请参照 [ history 文档](https://github.com/ReactTraining/history#blocking-transitions))。

The history object is mutable. Therefore it is recommended to access the [`location`](./location.md) from the render props of [`<Route>`](./Route.md), not from `history.location`. This ensures your assumptions about React are correct in lifecycle hooks. For example:
## history 是可变的(mutable)

history 对象是可变的,因此我们建议从 [`<Route>`](./Route.md) 的 prop里来获取 [`location`](./location.md) ,而不是从 `history.location` 直接获取。这样做可以保证 React 在生命周期中的钩子函数正常执行,例如以下代码:

```js
class Comp extends React.Component {
componentWillReceiveProps(nextProps) {
// will be true
// locationChanged 变量为 true
const locationChanged = nextProps.location !== this.props.location

// INCORRECT, will *always* be false because history is mutable.
// 不正确,locationChanged 变量会 *永远* 为 false ,因为 history 是可变的(mutable)。
const locationChanged = nextProps.history.location !== this.props.history.location
}
}

<Route component={Comp}/>
```

Additional properties may also be present depending on the implementation you're using. Please refer to [the history documentation](https://github.com/ReactTraining/history#properties) for more details.
不同的实现也许会提供给你额外的属性,更多详情请参照 [history 文档](https://github.com/ReactTraining/history#properties)
34 changes: 16 additions & 18 deletions packages/react-router/docs/api/location.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
# location

Locations represent where the app is now, where you want it to go, or
even where it was. It looks like this:
Location 是指你当前的位置,下一步打算去的位置,或是你之前所在的位置,形式大概就像这样:

```js
{
key: 'ac3df4', // not with HashHistory!
key: 'ac3df4', // 在使用 hashHistory 时,没有 key
pathname: '/somewhere'
search: '?some=search-string',
hash: '#howdy',
Expand All @@ -15,40 +14,40 @@ even where it was. It looks like this:
}
```

The router will provide you with a location object in a few places:
你使用以下几种方式来获取 location 对象:

- [Route component](./Route.md#component) as `this.props.location`
- [Route render](./Route.md#render-func) as `({ location }) => ()`
- [Route children](./Route.md#children-func) as `({ location }) => ()`
- [withRouter](./withRouter.md) as `this.props.location`
- [Route component](./Route.md#component) 中,以 `this.props.location` 的方式获取,
- [Route render](./Route.md#render-func) 中,以 `({ location }) => ()` 的方式获取,
- [Route children](./Route.md#children-func) 中,以 `({ location }) => ()` 的方式获取,
- [withRouter](./withRouter.md) 中,以 `this.props.location` 的方式获取。

It is also found on `history.location` but you shouldn't use that because its mutable. You can read more about that in the [history](./history.md) doc.
你也可以在 `history.location` 中获取 location 对象,但是别那么写,因为 history 是可变的。更多信息请参见 [history 文档](./history.md)

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 and animation.
location 对象不会发生改变,因此你可以在生命周期的钩子函数中使用 location 对象来查看当前页面的位置是否发生改变,这种技巧在获取远程数据以及使用动画时非常有用。

```js
componentWillReceiveProps(nextProps) {
if (nextProps.location !== this.props.location) {
// navigated!
// 已经跳转了!
}
}
```

You can provide locations instead of strings to the various places that navigate:
你可以在不同环境中使用 location :

- Web [Link to](../../../react-router-dom/docs/api/Link.md#to)
- Native [Link to](../../../react-router-native/docs/api/Link.md#to)
- [Redirect to](./Redirect.md#to)
- [history.push](./history.md#push)
- [history.replace](./history.md#push)

Normally you just use a string, but if you need to add some "location state" that will be available whenever the app returns to that specific location, you can use a location object instead. This is useful if you want to branch UI based on navigation history instead of just paths (like modals).
通常情况下,你只需要给一个字符串当做 location ,但是,当你需要添加一些 location 的状态时,你可以对象的形式使用 location 。并且当你需要多个 UI ,而这些 UI 取决于历史时,例如弹出框(modal),使用location 对象会有很大帮助。

```jsx
// usually all you need
// 通常你只需要这样使用 location
<Link to="/somewhere"/>

// but you can use a location instead
// 但是你同样可以这么用
const location = {
pathname: '/somewhere'
state: { fromDashboard: true }
Expand All @@ -60,10 +59,9 @@ history.push(location)
history.replace(location)
```

Finally, you can pass a location to the following components:
最后,你可以把 location 传入一下组件:

- [Route](./Route.md#location)
- [Switch](./Route.md#location)

This will prevent them from using the actual location in the router's state. This is useful for animation and pending navigation, or any time you want to trick a component into rendering at a different location than the real one.

这样做可以让组件不使用路由状态(router state)中的真实 location,因为我们有时候需要组件去渲染一个其他的 location 而不是本身所处的真实 location,比如使用动画或是等待跳转时。
25 changes: 12 additions & 13 deletions packages/react-router/docs/api/match.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
# match

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

- `params` - (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the path
- `isExact` - `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 类型)即路径参数,通过解析URL中动态的部分获得的键值对。
- `isExact` - 当为 `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](./withRouter.md) as the return value

If a Route does not have a `path`, and therefore always matches, you'll get the closest parent match. Same goes for `withRouter`.
-[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](./withRouter.md) 的返回值

当一个 Route 没有 `path` 时,它会匹配一切路径,你会匹配到最近的父级。在 `withRouter` 里也是一样的。

0 comments on commit 9ad2d35

Please sign in to comment.