Routes

`Routes` 是 React Router v6 中的一个新组件，用于定义路由规则。与之前版本的 `Route` 组件不同，`Routes` 允许你同时定义多个路由规则，并支持嵌套路由。

`Routes` 组件的基本用法如下：

import { Routes, Route } from 'react-router-dom';

function MyRouter() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/users" element={<Users />}>
        <Route path="/" element={<UsersList />} />
        <Route path=":id" element={<UserProfile />} />
      </Route>
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

在这个例子中，我们使用 `Routes` 组件来定义了四个路由规则：

- `/`：当访问根路径时，展示 `Home` 组件。
- `/about`：当访问 `/about` 路径时，展示 `About` 组件。
- `/users`：当访问 `/users` 路径时，展示 `Users` 组件，并且该组件下有两个子路由规则：
- `/`：当访问 `/users` 路径时，展示 `UsersList` 组件。
- `/:id`：当访问 `/users/:id` 路径时，展示 `UserProfile` 组件。
- `*`：当访问任何未定义的路径时，展示 `NotFound` 组件。

需要注意的是，如果你使用了嵌套路由，子路由的路径应该是相对于父路由的路径的。例如，在上面的例子中，`UsersList` 组件的路径实际上是 `/users`，而不是 `/users/`。

另外，`Routes` 组件是一个容器组件，因此你需要在它内部使用 `Route` 组件来定义具体的路由规则。每个 `Route` 组件都需要指定 `path` 属性和 `element` 属性，前者用于匹配当前 URL，后者用于展示对应的组件。同时，`Route` 组件还支持其他属性，例如 `exact`、`caseSensitive` 等等，用于进一步控制路由匹配的行为。