React Router之动态路由思想

1.简介

本指南的目的是解释使用React Router时要具有的思维模型。我们称其为“动态路由”，它与您可能更熟悉的“静态路由”完全不同。

2.静态路由

如果您使用过Rails，Express，Ember，Angular等，则使用了静态路由。

在这些框架中，您将在进行任何渲染之前将路由声明为应用程序初始化的一部分。React Router pre-v4也是静态的（主要是）。让我们看一下如何在express中配置路由：

// Express Style routing:
app.get("/", handleIndex);
app.get("/invoices", handleInvoices);
app.get("/invoices/:id", handleInvoice);
app.get("/invoices/:id/edit", handleInvoiceEdit);

app.listen();

请注意在应用监听之前如何声明路由。我们使用的客户端路由器是相似的。在Angular中，您先声明路线，然后AppModule在渲染之前将其导入顶层：

// Angular Style routing:
const appRoutes: Routes = [
  {
    path: "crisis-center",
    component: CrisisListComponent
  },
  {
    path: "hero/:id",
    component: HeroDetailComponent