forked from justjavac/react-router-v4-CN
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request justjavac#23 from Jasenpan1987/master
翻译了 context-router, history, location和match部分
- Loading branch information
Showing
4 changed files
with
56 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) 来包裹的组件来传递变量,并且使用这些变量。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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` 里也是一样的。 |