philosophy_React Router 4.0 的哲学

这篇文档主要解释了核心组件什么时候应该使用 REACT ROUTER，我们称这种解释为动态路由(Dynamic Routing)， 它跟我们所熟悉的静态路由有非常大的不同。

1.1 什么是静态路由

如果你使用过 Rails， Express， Angular 之类的框架, 你肯定使用过静态路由。在与之类似的框架中，我们需要在应用程序渲染开始之前，也就是在程序的初始化过程中声明路由。 REACT ROUTER PRE-V4 (初期版本）很大程度上也属于静态路由。首先让我们来看一下在express中是如何配置路由的：

app.get('/', handleIndex)
app.get('/invoices', handleInvoices)
app.get('/invoices/:id', handleInvoice)
app.get('/invoices/:id/edit', handleInvoiceEdit)

app.listen()

我们留意到，在app.listen方法之前，我们必须要声明路由。跟我们之前用过的客户端路由相似. 在 Angular 中，应用开始渲染之前，你需要最将路由声明在最前面并且将他们应用到最顶层的 AppModule中:

const appRoutes: Routes = [
  { path: 'crisis-center',
    component: CrisisListComponent
  },
  { path: 'hero/:id',
    component: HeroDetailComponent
  },
  { path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**',
    component: PageNotFoundComponent
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ]
})

export class AppModule { }

Ember 框架有一个常规的配置文件routes.js ，它的Build可以帮你读取并导入到应用程序里。同上，在你的app渲染之前的必须步骤（不知道原作者想表达什么，记住这有一个常规文件就好了）：

Router.map(function() {
  this.route('about');
  this.route('contact');
  this.route('rentals', function() {
    this.route('show', { path: '/:rental_id' });
  });
});

export default Router

虽然这些API不尽相同，但是他们都是共享模块的静态路由。react router v4之前也是这么干的。
如果想要成功学习REACT ROUTER，你需要忘记以上所讲的东西。

1.2 背景故事

坦白讲，我们对我们发布的REACT ROUTER 2.x的发展方向非常的气馁. 我们（Micheal和Ryan）觉得被我们这些API所束缚，并且意识导我们正在重构的部分代码(lifecycles(生命周期)...),跟React给我们构建UI的核心组件并不对接。

当我们离开酒店大堂准备去一个研讨会，讨论应该怎么应对这个问题的时候，我们随口聊天：“如果我们使用在研讨会上宣传的模板来构建我们的路由，会怎么样呢？”

仅仅开发了一个小时，我们便有了react router4.0的我们想要的路由的核心概念，我们终结了不在react 外面的 API ， 取而代之的是我们创造出来的，对未来的react更加兼容的API。我们相信你肯定会喜欢的。

1.3 动态路由(Dynamic Routing)

什么是动态路由？ 我们觉得动态路由可以在你的app正在渲染的时候启动，而不是在一个配置或者或者一个正在运行的app外部的常规文件中。 也就是说几乎所有事情都可以通过react router中的一个组件来完成。 现在让我们用60s时间浏览一下API ，来看看它们是如何工作的:

首先，在你的目标文件中引入router，并且在app的头部渲染它：

// react-native
import { NativeRouter } from 'react-router-native'

// react-dom (what we'll use here)
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render((
  <BrowserRouter>
    <App/>
  </BrowserRouter>
), el)

下一步，引入link 组件去链接一个新的地址：

const App = () => (
  <div>
    <nav>
      <Link to="/dashboard">Dashboard</Link>
    </nav>
  </div>
)

最后，将你想要渲染的UI渲染到Route组件中。如此，当用户访问/dashboard的时候，你的页面就能正常工作了。

const App = () => (
  <div>
    <nav>
      <Link to="/dashboard">Dashboard</Link>
    </nav>
    <div>
      <Route path="/dashboard" component={Dashboard}/>
    </div>
  </div>
)

如果你想要传入一些特定的属性，例如：{match, localtion, history}，那么Route会渲染一个<Dashboard {...props} /> 其中，props 包含了这些属性。如果用户并没有访问 /dashboard，那么 Route会返回null. 以上就是关于动态路由的很多事情。

1.4 嵌套路由(Nested Routes)

很多路由都有一些例如“嵌套路由”的概念。如果你已经使用之前发布的react router v4，那么你肯定已经知道这个玩意儿了！当你从静态路由配置过度到动态、呈现式路由，你该如何嵌套路由呢？ 这跟你嵌套一个div一样简单？

const App = () => (
  <BrowserRouter>
    {/* here's a div */}
    <div>
      {/* here's a Route */}
      <Route path="/tacos" component={Tacos}/>
    </div>
  </BrowserRouter>
)

// when the url matches `/tacos` this component renders
const Tacos  = ({ match }) => (
  // here's a nested div
  <div>
    {/* here's a nested Route,
        match.url helps us make a relative path */}
    <Route
      path={match.url + '/carnitas'}
      component={Carnitas}
    />
  </div>
)

为什么router 组件没有使用嵌套API( •̀ ω •́ )✧？ 因为Route 只是一个组件，就跟DIV一样，所以从现在开始构建route简直跟构建div一样简单！

让我们来谈些棘手的吧。

1.5 响应式路由

考虑一个对用户呈现 /invoices。 你的app需要适应不同尺寸的屏幕， 他们有一个狭小的视图，并且你只能给他们一个发票(invoices)的列表和一个链接到invoice dashboard的链接，从而以进一步导航：

Small Screen
url: /invoices

+----------------------+
|                      |
|      Dashboard       |
|                      |
+----------------------+
|                      |
|      Invoice 01      |
|                      |
+----------------------+
|                      |
|      Invoice 02      |
|                      |
+----------------------+
|                      |
|      Invoice 03      |
|                      |
+----------------------+
|                      |
|      Invoice 04      |
|                      |
+----------------------+

在大屏幕中，我们想要显示主-从视图，此刻我们的导航条在左边，显示面板/制定发票会显示在右边，例如这样：

Large Screen
url: /invoices/dashboard

+----------------------+---------------------------+
|                      |                           |
|      Dashboard       |                           |
|                      |   Unpaid:             5   |
+----------------------+                           |
|                      |   Balance:   $53,543.00   |
|      Invoice 01      |                           |
|                      |   Past Due:           2   |
+----------------------+                           |
|                      |                           |
|      Invoice 02      |                           |
|                      |   +-------------------+   |
+----------------------+   |                   |   |
|                      |   |  +    +     +     |   |
|      Invoice 03      |   |  | +  |     |     |   |
|                      |   |  | |  |  +  |  +  |   |
+----------------------+   |  | |  |  |  |  |  |   |
|                      |   +--+-+--+--+--+--+--+   |
|      Invoice 04      |                           |
|                      |                           |
+----------------------+---------------------------+

现在暂停一分钟然后想一想如何将 /invoices url适应两个大小的屏幕。这个路由甚至对大屏幕的路由有效？我们应该在视图中的右边放什么东西？

Large Screen
url: /invoices
+----------------------+---------------------------+
|                      |                           |
|      Dashboard       |                           |
|                      |                           |
+----------------------+                           |
|                      |                           |
|      Invoice 01      |                           |
|                      |                           |
+----------------------+                           |
|                      |                           |
|      Invoice 02      |             ???           |
|                      |                           |
+----------------------+                           |
|                      |                           |
|      Invoice 03      |                           |
|                      |                           |
+----------------------+                           |
|                      |                           |
|      Invoice 04      |                           |
|                      |                           |
+----------------------+---------------------------+

在大视图中，/invoices 并不是一个有效的路由（/invoices/dashboard才是），但是在小屏幕中它确是！想让这件事变得更有趣点？加入有人有一个巨大的手机，他们可以在纵向看到 /invoices ，并且如果他们旋转他们的手机到横向。这时我们有足够的空间去显示主-从UI，这时你需要重新定位路由。

REACT ROUTER 之前版本的静态路由对于这个问题没有确切的答案。然而当路由为动态的时候，你可以编写这个功能。如果你开始把路由想象成UI，而不是静态配置， 你的直觉会让你写出以下代码：

const App = () => (
  <AppLayout>
    <Route path="/invoices" component={Invoices}/>
  </AppLayout>
)

const Invoices = () => (
  <Layout>

    {/* always show the nav */}
    <InvoicesNav/>

    <Media query={PRETTY_SMALL}>
      {screenIsSmall => screenIsSmall
        // small screen has no redirect
        ? <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
          </Switch>
        // large screen does!
        : <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
            <Redirect from="/invoices" to="/invoices/dashboard"/>
          </Switch>
      }
    </Media>
  </Layout>
)

当用户把他们的手机从横向旋转为纵向的时候， 这段代码会自动重定位到 /invoices/dashboard url中。 路由的改变随着用户手中的设备旋转而改变。

这仅仅只是单单的案例。还有更多的案例我们可以讨论，但是为了节省时间，我们将这些案例总结为一个忠告：将你的直觉与react router的 保持一致，以组件的形式去实现路由，而不是静态配置形式。思考使用React的声明式组件的思想去解决问题，因为几乎所有react router的问题，都是 react 的问题。