路径参数

路由中的参数用于捕获 URL 中的动态值。这对于创建更灵活且可以处理不同值的路由非常有用。

<Route path="/users/:id" component={User} />

在这个例子中，:id 参数将捕获 URL 中 /users/ 之后的任何值。冒号 : 用于表示参数，而 id 是参数的名称。当 URL 匹配这个路由时，User 组件将被渲染。

<Show when={params.something} keyed>
  <MyComponent />
</Show>

访问参数

你可以使用 useParams 获取参数捕获的值。

import { useParams } from "@solidjs/router";

function User() {
    const params = useParams();
    return <div>User ID: {params.id}</div>; {/* Output: User ID: 123 */}
}

验证参数

每个路径参数都可以使用 MatchFilter 在 Route 组件上进行验证。无需手动检查参数是否存在，您可以使用 MatchFilter 来确保参数格式正确。

import { lazy } from "solid-js";
import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";

const User = import("./pages/User");

const filters = {
  parent: ["mom", "dad"], // allow enum values
  id: /^\d+$/, // only allow numbers
  withHtmlExtension: (v: string) => v.length > 5 && v.endsWith(".html"), // we want an `*.html` extension
};

render(() => (
  <Router>
    <Route
      path="/users/:parent/:id/:withHtmlExtension"
      component={User}
      matchFilters={filters}
    />
  </Router>
), document.getElementById("app"));

在这个例子中，matchFilter prop 根据 filters 对象中定义的指定过滤器验证parent、id 和 withHtmlExtension 参数。如果验证失败，路由将不会匹配，组件不会被渲染。

在这个例子中，这意味着：

• /users/mom/123/contact.html 会匹配,
• /users/dad/456/about.html 会匹配,
• /users/aunt/123/contact.html 不匹配，因为 :parent 不是 'mom' 或 'dad'，
• /users/mom/me/contact.html 不匹配，因为 :id 不是数字，
• /users/dad/123/contact 不匹配，因为 :withHtmlExtension 缺少 .html

可选参数

通过在参数名后添加 ? ，可以将参数设置为可选。

<Route path="/users/:id?" component={User} />

使用此设置，路由将同时匹配 /users 和 /users/123。但是，需要注意的是， ? 仅使路径的最后一段参数成为可选。因此，超出可选参数的路径将不会被匹配。例如， /users/123/contact 将不会匹配。

通配符路由

通配符路由可用于匹配路径中的任意数量的段。要创建通配符路由，请使用 * 后跟参数名称。

<Route path="/users/*" component={User} />

使用星号 * 作为参数将匹配 /users 之后的任意数量的段。这包括 /users 、/users/123 、/users/123/contact 等。

如果你需要暴露路径中的通配符段，你可以给它们命名：

<Route path="/users/*rest" component={User} />

在这种情况下，rest 将包含 /users/ 之后的剩余路径。

需要注意的是，通配符路由必须位于路径末尾。如果你在末尾之前放置通配符路由，比如 /users/*rest/:id，将不会匹配任何路由。