翻译了react-router-website/modules/examples里面的例子

packages/react-router-website/modules/examples/Ambiguous.js

@@ -17,17 +17,14 @@ const AmbiguousExample = () => (
       </ul>
 
       {/*
-          Sometimes you want to have a whitelist of static paths
-          like "/about" and "/company" but also allow for dynamic
-          patterns like "/:user". The problem is that "/about"
-          is ambiguous and will match both "/about" and "/:user".
-          Most routers have an algorithm to decide for you what
-          it will match since they only allow you to match one
-          "route". React Router lets you match in multiple places
-          on purpose (sidebars, breadcrumbs, etc). So, when you
-          want to clear up any ambiguous matching, and not match
-          "/about" to "/:user", just wrap your <Route>s in a
-          <Switch>. It will render the first one that matches.
+          有时你想要允许类似「/about」和「/company」的这种静态路径，而且同时
+          需要允许类似「/:user」这种对于路径参数的匹配，而问题是「/about」在
+          这里是模糊的，它会同时匹配「/about"和"/:user」。大多数路由系统都有
+          一套自己的算法来决定哪些路径可以匹配哪些不能匹配，从而匹配到一个确
+          定的路由 route 。你可以使用 React Router 在很多不同的地方匹配路
+          径例如：sidebars，breadcrumbs 等等。当你你想匹配「/about」而不想
+          同时也匹配到「/:user」时，你可以使用 <Switch> 来把你的 <Route> 包
+          一层，在 <Switch> 里的第一个匹配对象就会被渲染出来。
       */}
       <Switch>
         <Route path="/about" component={About}/>

packages/react-router-website/modules/examples/Animation.js

@@ -7,7 +7,7 @@ import {
   Redirect
 } from 'react-router-dom'
 
-/* you'll need this CSS somewhere
+/* 请把以下的 css 代码和你其他的 css 放到一起
 .fade-enter {
   opacity: 0;
   z-index: 1;
@@ -40,11 +40,11 @@ const AnimationExample = () => (
             transitionEnterTimeout={300}
             transitionLeaveTimeout={300}
           >
-            {/* no different than other usage of
-                ReactCSSTransitionGroup, just make
-                sure to pass `location` to `Route`
-                so it can match the old location
-                as it animates out
+            {/* 
+                这里和使用 ReactCSSTransitionGroup 没有区别，
+                唯一需要注意的是要把你的地址（location）传入
+                「Route」里使它可以在动画切换的时候匹配之前的
+                地址。
             */}
             <Route
               location={location}

packages/react-router-website/modules/examples/Auth.js

@@ -8,18 +8,19 @@ import {
 } from 'react-router-dom'
 
 ////////////////////////////////////////////////////////////
-// 1. Click the public page
-// 2. Click the protected page
-// 3. Log in
-// 4. Click the back button, note the URL each time
+// 流程简介：
+// 1. 点击「public 页面」
+// 2. 点击 「protected 页面」
+// 3. 登入
+// 4. 点击后退，并且在每一步过程中观察URL的变化
 
 const AuthExample = () => (
   <Router>
     <div>
       <AuthButton/>
       <ul>
-        <li><Link to="/public">Public Page</Link></li>
-        <li><Link to="/protected">Protected Page</Link></li>
+        <li><Link to="/public">公开页面</Link></li>
+        <li><Link to="/protected">非公开页面</Link></li>
       </ul>
       <Route path="/public" component={Public}/>
       <Route path="/login" component={Login}/>
@@ -32,7 +33,7 @@ const fakeAuth = {
   isAuthenticated: false,
   authenticate(cb) {
     this.isAuthenticated = true
-    setTimeout(cb, 100) // fake async
+    setTimeout(cb, 100) // 模拟异步。
   },
   signout(cb) {
     this.isAuthenticated = false
@@ -43,12 +44,12 @@ const fakeAuth = {
 const AuthButton = withRouter(({ history }) => (
   fakeAuth.isAuthenticated ? (
     <p>
-      Welcome! <button onClick={() => {
+      欢迎! <button onClick={() => {
         fakeAuth.signout(() => history.push('/'))
-      }}>Sign out</button>
+      }}>登出</button>
     </p>
   ) : (
-    <p>You are not logged in.</p>
+    <p>请先登录</p>
   )
 ))
 
@@ -65,8 +66,8 @@ const PrivateRoute = ({ component: Component, ...rest }) => (
   )}/>
 )
 
-const Public = () => <h3>Public</h3>
-const Protected = () => <h3>Protected</h3>
+const Public = () => <h3>公开的页面</h3>
+const Protected = () => <h3>非公开的页面</h3>
 
 class Login extends React.Component {
   state = {
@@ -91,8 +92,8 @@ class Login extends React.Component {
 
     return (
       <div>
-        <p>You must log in to view the page at {from.pathname}</p>
-        <button onClick={this.login}>Log in</button>
+        <p>若想访问 {from.pathname} ，你需要先登录</p>
+        <button onClick={this.login}>登录</button>
       </div>
     )
   }

packages/react-router-website/modules/examples/CustomLink.js

@@ -8,8 +8,8 @@ import {
 const CustomLinkExample = () => (
   <Router>
     <div>
-      <OldSchoolMenuLink activeOnlyWhenExact={true} to="/" label="Home"/>
-      <OldSchoolMenuLink to="/about" label="About"/>
+      <OldSchoolMenuLink activeOnlyWhenExact={true} to="/" label="首页"/>
+      <OldSchoolMenuLink to="/about" label="关于"/>
       <hr/>
       <Route exact path="/" component={Home}/>
       <Route path="/about" component={About}/>
@@ -27,13 +27,13 @@ const OldSchoolMenuLink = ({ label, to, activeOnlyWhenExact }) => (
 
 const Home = () => (
   <div>
-    <h2>Home</h2>
+    <h2>首页</h2>
   </div>
 )
 
 const About = () => (
   <div>
-    <h2>About</h2>
+    <h2>关于</h2>
   </div>
 )
 

packages/react-router-website/modules/examples/ModalGallery.js

@@ -6,34 +6,27 @@ import {
   Link
 } from 'react-router-dom'
 
-// This example shows how to render two different screens
-// (or the same screen in a different context) at the same url,
-// depending on you got there.
-//
-// Click the colors and see them full screen, then "visit the
-// gallery" and click on the colors. Note the URL and the component
-// are the same as before but now we see them inside a modal
-// on top of the old screen.
+
+// 这个例子展示了如何在相同的 URL 下渲染两个不同的页面（或者在不同 context 下的两个相同页面）。
+// 点击颜色来全屏查看，然后点击「访问Galary」并且在弹窗里查看其他颜色。注意观察弹窗里面
+// 的 URL 以及组件和之前是一样的。
 
 class ModalSwitch extends React.Component {
 
-  // We can pass a location to <Switch/> that will tell it to
-  // ignore the router's current location and use the location
-  // prop instead.
-  //
-  // We can also use "location state" to tell the app the user
-  // wants to go to `/images/2` in a modal, rather than as the
-  // main page, keeping the gallery visible behind it.
-  //
-  // Normally, `/images/2` wouldn't match the gallery at `/`.
-  // So, to get both screens to render, we can save the old
-  // location and pass it to Switch, so it will think the location
-  // is still `/` even though its `/images/2`.
+  // 把一个位置（location）传给 <Switch/> 意味着路由会忽略当前的位置，并且使用
+  // 被传入 prop 的位置（location）。
+  // 「location state」属性使用户在弹窗（modal）里面访问路径「/images/2」，而
+  // 不是在主页面上来访问这个路径，而且弹窗页面（modal）会把 gallery 页面挡住。
+  // 通常，「/images/2」不会匹配到 gallery 的「/」， 而为了使两个页面都能渲染，我
+  // 们要保存之前的位置，并且把这个位置传入Switch，然后就算我们已经转到
+  // 「/images/2」这个位置了而Switch会以为当前位置还是「/」。
+
   previousLocation = this.props.location
 
   componentWillUpdate(nextProps) {
     const { location } = this.props
-    // set previousLocation if props.location is not modal
+    // 如果 props.location 不是 modal 的话，就把 this.props.location 
+    // 赋值给 previousLocation。
     if (
       nextProps.history.action !== 'POP' &&
       (!location.state || !location.state.modal)
@@ -47,7 +40,7 @@ class ModalSwitch extends React.Component {
     const isModal = !!(
       location.state &&
       location.state.modal &&
-      this.previousLocation !== location // not initial render
+      this.previousLocation !== location // 不是首次渲染。
     )
     return (
       <div>
@@ -63,11 +56,11 @@ class ModalSwitch extends React.Component {
 }
 
 const IMAGES = [
-  { id: 0, title: 'Dark Orchid', color: 'DarkOrchid' },
-  { id: 1, title: 'Lime Green', color: 'LimeGreen' },
-  { id: 2, title: 'Tomato', color: 'Tomato' },
-  { id: 3, title: 'Seven Ate Nine', color: '#789' },
-  { id: 4, title: 'Crimson', color: 'Crimson' }
+  { id: 0, title: '深兰花紫', color: 'DarkOrchid' },
+  { id: 1, title: '石灰绿', color: 'LimeGreen' },
+  { id: 2, title: '番茄色', color: 'Tomato' },
+  { id: 3, title: '#七八九', color: '#789' },
+  { id: 4, title: '赤红色', color: 'Crimson' }
 ]
 
 const Thumbnail = ({ color }) =>
@@ -86,11 +79,11 @@ const Image = ({ color }) =>
 
 const Home = () => (
   <div>
-    <Link to='/gallery'>Visit the Gallery</Link>
-    <h2>Featured Images</h2>
+    <Link to='/gallery'>访问 Galary </Link>
+    <h2>精选图片</h2>
     <ul>
-      <li><Link to='/img/2'>Tomato</Link></li>
-      <li><Link to='/img/4'>Crimson</Link></li>
+      <li><Link to='/img/2'>番茄色</Link></li>
+      <li><Link to='/img/4'>赤红色</Link></li>
     </ul>
   </div>
 )
@@ -102,7 +95,7 @@ const Gallery = () => (
         key={i.id}
         to={{
           pathname: `/img/${i.id}`,
-          // this is the trick!
+          // 这里是关键！
           state: { modal: true }
         }}
       >
@@ -116,7 +109,7 @@ const Gallery = () => (
 const ImageView = ({ match }) => {
   const image = IMAGES[parseInt(match.params.id, 10)]
   if (!image) {
-    return <div>Image not found</div>
+    return <div>找不到图片</div>
   }
 
   return (
@@ -160,7 +153,7 @@ const Modal = ({ match, history }) => {
         <h1>{image.title}</h1>
         <Image color={image.color} />
         <button type='button' onClick={back}>
-          Close
+          关闭
         </button>
       </div>
     </div>

packages/react-router-website/modules/examples/NoMatch.js

@@ -11,11 +11,11 @@ const NoMatchExample = () => (
   <Router>
     <div>
       <ul>
-        <li><Link to="/">Home</Link></li>
-        <li><Link to="/old-match">Old Match, to be redirected</Link></li>
-        <li><Link to="/will-match">Will Match</Link></li>
-        <li><Link to="/will-not-match">Will Not Match</Link></li>
-        <li><Link to="/also/will/not/match">Also Will Not Match</Link></li>
+        <li><Link to="/">主页</Link></li>
+        <li><Link to="/old-match">旧链接，会被重定向</Link></li>
+        <li><Link to="/will-match">这个链接可以被匹配到</Link></li>
+        <li><Link to="/will-not-match">这个链接不能被匹配到</Link></li>
+        <li><Link to="/also/will/not/match">这个链接也不能被匹配到</Link></li>
       </ul>
       <Switch>
         <Route path="/" exact component={Home}/>
@@ -29,18 +29,17 @@ const NoMatchExample = () => (
 
 const Home = () => (
   <p>
-    A <code>&lt;Switch></code> renders the
-    first child <code>&lt;Route></code> that
-    matches. A <code>&lt;Route></code> with
-    no <code>path</code> always matches.
+    <code> &lt;Switch> </code>会渲染它里面的第一个可以匹配的
+    <code> &lt;Route> </code>，而且一个没有<code> path </code>的
+    <code> &lt;Route> </code> 会满足任何匹配。
   </p>
 )
 
-const WillMatch = () => <h3>Matched!</h3>
+const WillMatch = () => <h3>匹配到了！</h3>
 
 const NoMatch = ({ location }) => (
   <div>
-    <h3>No match for <code>{location.pathname}</code></h3>
+    <h3>无法匹配 <code>{location.pathname}</code></h3>
   </div>
 )
 

packages/react-router-website/modules/examples/PreventingTransitions.js

@@ -10,13 +10,13 @@ const PreventingTransitionsExample = () => (
   <Router>
     <div>
       <ul>
-        <li><Link to="/">Form</Link></li>
-        <li><Link to="/one">One</Link></li>
-        <li><Link to="/two">Two</Link></li>
+        <li><Link to="/">表单</Link></li>
+        <li><Link to="/one">页面 1</Link></li>
+        <li><Link to="/two">页面 2</Link></li>
       </ul>
       <Route path="/" exact component={Form}/>
-      <Route path="/one" render={() => <h3>One</h3>}/>
-      <Route path="/two" render={() => <h3>Two</h3>}/>
+      <Route path="/one" render={() => <h3>页面 1</h3>}/>
+      <Route path="/two" render={() => <h3>页面 2</h3>}/>
     </div>
   </Router>
 )
@@ -42,18 +42,18 @@ class Form extends React.Component {
         <Prompt
           when={isBlocking}
           message={location => (
-            `Are you sure you want to go to ${location.pathname}`
+            `你真的要跳转到 ${location.pathname}么？`
           )}
         />
 
         <p>
-          Blocking? {isBlocking ? 'Yes, click a link or the back button' : 'Nope'}
+          是否无法跳转? {isBlocking ? '好，现在试试再试试点击那些链接' : '可以正常跳转'}
         </p>
 
         <p>
           <input
             size="50"
-            placeholder="type something to block transitions"
+            placeholder="你这里面输入了以后就不能正常跳转了"
             onChange={event => {
               this.setState({
                 isBlocking: event.target.value.length > 0
@@ -63,7 +63,7 @@ class Form extends React.Component {
         </p>
 
         <p>
-          <button>Submit to stop blocking</button>
+          <button>提交表单以后就可以正常跳转了</button>
         </p>
       </form>
     )

packages/react-router-website/modules/examples/Recursive.js

@@ -25,7 +25,7 @@ const Person = ({ match }) => {
 
   return (
     <div>
-      <h3>{person.name}’s Friends</h3>
+      <h3>{person.name} 的朋友</h3>
       <ul>
         {person.friends.map(id => (
           <li key={id}>