Skip to content
This repository was archived by the owner on Aug 11, 2021. It is now read-only.

翻译 Static Routes 和 翻译 Testing #17

Merged
merged 3 commits into from
Mar 25, 2017
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
6 changes: 3 additions & 3 deletions packages/react-router/docs/guides/static-routes.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Static Routes
# Static Routes | 静态路由

Previous versions of React Router used static routes to configure your application's routing. This allows for inspection and matching of routes before rendering. Since v4 moved to dynamic components instead of route configs, some previous use-cases became less obvious and tricky.
前几个版本的React Router使用静态路由去配置你的应用的路由。这允许在渲染之前对路由进行检查和匹配。自从v4版本用动态组件取缔路由配置,一些以前的用例现在变得不太明显而且比较棘手。

We are developing a package to work with static route configs and React Router, to continue to meet those use-cases. It is under development now but we'd love for you to try it out and help out.
我们正在开发一个使用静态路由配置和React Router的包,以继续满足这些用例。这个包现在正在开发中,但我们很乐意为您尝试并帮助您。

[React Router Config](https://github.com/reacttraining/react-router/tree/master/packages/react-router-config)
53 changes: 26 additions & 27 deletions packages/react-router/docs/guides/testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ React Router依赖于React。这会影响你如何通过使用我们的组件来
If you try to unit test one of your components that renders a `<Link>` or a `<Route>`, etc. you'll get some errors and warnings about context. While you may be tempted to stub out the router context yourself, we recommend you wrap your unit test in a `<StaticRouter>` or a `<MemoryRouter>`. Check it out:

如果你尝试单元测试你渲染的`<Link>`或者`<Router>`组件,你会得到一些上下文的错误和警告信息。虽然你可能会找出自己的路由上下文,我们推荐你将你的单元测试包裹在`<StaticRouter>`或者`<MemoryRouter>`中。来看看:

```jsx
class Sidebar extends Component {
// ...
Expand Down Expand Up @@ -58,15 +57,11 @@ test('it expands when the button is clicked', () => {
That's all there is to it.
这就是所有的示例。

## Starting at specific routes

`<MemoryRouter>` supports the `initialEntries` and `initialIndex` props,
so you can boot up an app (or any smaller part of an app) at a specific
location.
这就是它的全部。

## 从特殊的路由开始
`<MemoryRouter>` 支持 `initialEntries` 和 `initialIndex` 两个属性,因此你可以在一个特定位置启动一个应用(或者应用的任意一小部分)。
## Starting at specific routes | 从特定的路由开始

`<MemoryRouter>` 支持`initialEntries` 和 `initialIndex` 属性。,因此你可以从一个特定的地址(location)来启动你的app(或者是app的一个小部分)。
```js
test('current user is active in sidebar', () => {
render(
Expand All @@ -80,7 +75,9 @@ test('current user is active in sidebar', () => {

## Navigating

We have a lot of tests that the routes work when the location changes, so you probably don't need to test this stuff. But if you must, since everything happens in render, we do something a little clever like this:

当地址(location)发生变化的时候,我们会对路由进行大量的测试,所以你可能没有必要对这个(Navigating
)进行测试。但是如果你必须这样做,基于一切都在渲染中发生,我们可以对此做一些聪明的事情:

## 导航

Expand All @@ -92,11 +89,13 @@ import React from 'react'
import { Route, Link, MemoryRouter } from 'react-router-dom'
import { Simulate } from 'react-addons-test-utils'

// a way to render any part of your app inside a MemoryRouter
// you pass it a list of steps to execute when the location
// changes, it will call back to you with stuff like
// `match` and `location`, and `history` so you can control
// the flow and make assertions.

// 把整个app都放在一个MemoryRouter里面渲染的其中一个方法是
// 把他们都放进一个要执行的步骤列表里面,
// 当地址(location)发生变化的时候,
// 它就会连同`match`, `location`, 和 `history`一起被回调,
// 因此,你可以控制整个流程和做断言。

const renderTestSequence = ({
initialEntries,
initialIndex,
Expand Down Expand Up @@ -149,8 +148,7 @@ const renderTestSequence = ({
render(<Test/>, div)
}

// our Subject, the App, but you can test any sub
// section of your app too
// 我们的主题是这个App,但是你也可以测试你的应用的一个小部分
const App = () => (
<div>
<Route exact path="/" render={() => (
Expand All @@ -167,42 +165,43 @@ const App = () => (
</div>
)

// the actual test!
// 实际测试!
it('navigates around', (done) => {

renderTestSequence({

// tell it the subject you're testing
// 告诉它你正在测试的 subject
subject: App,

// and the steps to execute each time the location changes
// 以及每次地址(location)改变时执行的步骤
steps: [

// initial render
// 初始渲染
({ history, div }) => {
// assert the screen says what we think it should
//断言屏幕的输出和我们期望的输出是否一样
console.assert(div.innerHTML.match(/Welcome/))

// now we can imperatively navigate as the test
// 现在我们可以强制导航作为测试
history.push('/dashboard')
},

// second render from new location
// 从新的地址(location)发起二次渲染
({ div }) => {
console.assert(div.innerHTML.match(/Dashboard/))

// or we can simulate clicks on Links instead of
// using history.push

//或者我们可以模拟点击链接,而不使用 history.push
Simulate.click(div.querySelector('#click-me'), {
button: 0
})
},

// final render
// 最终渲染
({ location }) => {
console.assert(location.pathname === '/')
// you'll want something like `done()` so your test
// fails if you never make it here.

//你需要在这里写下 `done()`,如果你从未这样做,你的测试是失败的。
done()
}
]
Expand Down