静态路由Static Routing

如果你使用过Rails, Express, Ember, Angular....等，你就使用过静态路由，在这些框架中，你声明你的路由作为你app初始化的一部分，在任何render之前。

React Router在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();

注意，路由声明在listen之前，客户端的路由也是相似的，在Angular中，也是在前面声明路由，然后import他们到顶部的AppModule，在render之前

// Angular Style routing:
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 {}

尽快他们api不同，但是思想都是一样的，都是静态路由，React Router在v4之前也跟他们一样

为了成功的使用React Router，你必须现在把他们都忘记。

动态路由 Dynamic Routing

当我们说到动态路由，意味着路由可以在app已经render之后定义。

这意味着在React Router中everything is a component，花60s复习一下你使用过得api。

首先，使用一个Router组件render在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>);

最后，当你访问/dashboard的时候，render一个Route用来展示一些UI

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

Route将会渲染成 <Dashboard {...props}/>

{...props}包含一些route特有的属性，如{ match, location, history }

当用户访问的不是“/dashboard”，则返回null

嵌套路由Nested Routes

大部分路由都有嵌套路由的概念，当你从静态路由配置转到动态路由，你怎么嵌套“ “nest routes””路由呢？怎么嵌套“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>
);

如上，可以看到并没有嵌套路由的api，Route就是一个组件，就像div一样，我们可以像嵌套div一样，嵌套Route

分享到