`Routes`和`Route`

Routes组件是在一个应用中定义路由表的位置，其中对应用中所使用到的所有路由进行了包裹。Routes组件负责了在根据浏览动作栈顶的内容，在路由表中寻找匹配路由的职责。所以Routes组件在使用的时候经常是以包裹着一大片的Route组件的形式出现，并且会作为所有Route组件的父级组件。

在Routes组件的直接Route子组件的内容将会直接渲染在路由表定义的位置上，渲染的内容由被匹配上的Route组件中的element属性定义。

Route组件的功能就非常的专一了，其目标就是定义路由路径与路由对应的组件的之间的关系。位于Routes组件下的所有Route组件的集合构成了一个完整的路由表。在应用产生浏览动作的时候，Routes组件会在其下定义的路由表中进行匹配。与 React Router 5.x 中需要精确的控制Route组件的顺序不同的是，React Router 6.x 中的Routes组件会更加智能的在所有的Route组件中选择最佳的路由进行匹配。所以在使用 React Router 6.x 的应用中，Route组件的定义先后顺序已经不再是开发人员需要关注的重点了。

在之前 React Router 5.x 中，如果需要定义嵌套路由，那么子路由需要在路由页面中需要渲染内容的位置上定义被嵌套的子路由。这样一来就整个路由表的定义就变得分散了，几乎是分部在了整个应用的各个页面组件上。React Router 6.x 中的Route组件改变了这一特性，现在的Route组件支持使用Route组件作为其子组件来定义嵌套路由了。在这个特性的支持下，原本分散的路由表被重新集中了起来。子路由对应的组件会被渲染在路由组件中的Outlet组件中。

Tip

如果父级路由没有指定element属性，那么匹配到的子路由就会直接渲染在父级路由所在的位置上。也就是说此时的嵌套路由的渲染行为就像是一个不嵌套的路由一样。

以下是一个应用中嵌套路由的定义示例。

function AppRoutes() {
  return (
    <Routes>
      <Route index element={<Home />} />
      <Route path="/things" element={<Things />}>
        <Route path=":id" element={<Thing />} />
        <Route path="new" element={<NewThing />} />
      </Route>
      <Route path="/tasks" element={<Tasks />}>
        <Route path=":id" element={<Task />} />
        <Route path="new" element={<NewTask />} />
        <Route path="delete/confirm" element={<ConfirmDeleteTask />} />
      </Route>
    </Routes>
  );
}

在这个示例中Route组件最经常出现的两个属性分别是path和element。这两个属性分别定义路由所可以匹配的路径和当路径被匹配上以后所需要渲染的组件。这两个属性的用法相比 React Router 5.x 中的相似属性区别不大。但是对于嵌套路由来说，子Route组件的path属性在匹配的时候会自动的组合父Route组件的path属性值。也就是说，对于示例中的NewThing组件来说，其对应的路由路径就是/things/new。如果路由在定义的设置了index属性，那么这个路由将不需要定义path属性，其匹配路由路径将于其父路由相同，也就是一般常说的/。

在默认情况下，Route组件就是一个Outlet组件，如果没有在父路由组件中显式指定Outlet，那么将会在Route出现的位置上，渲染子组件的内容。这种用法通常仅在父路由组件中不包含任何其他 UI，只需要在其中渲染不同的子路由的情况下使用。

Route组件可以使用的其他属性还有以下这些，主要功能都是用于定义和控制路由路径的匹配的。

caseSensitive，采用大小写敏感的形式匹配，默认为false。

除此以外，Route组件还可以使用之前RouteProvider一节中RouteObject定义的全部字段，例如loader、action等。

Live with React

Routes和Route

`Routes`和`Route`