Concepts

导航

编辑此页面

在应用程序中创建路由后，可以使用锚点标签帮助用户在不同视图或页面之间导航。

const App = (props) => (
  <>
    <nav>
      <a href="/users">Users</a>
      <a href="/">Home</a>
    </nav>
    <h1>My Site with lots of pages</h1>
    {props.children}
  </>
);

<A> component

虽然你可以使用原生 HTML 锚点标签，但 Solid Router 确实提供了 <A> 组件。虽然与锚点标签类似，但 <A> 组件支持自动应用基础 URL 路径和相对路径。

const App = (props) => (
  <>
    <nav>
        <A href="/">Home</A>
        <A href="/users">Users</A>
    </nav>
    <h1>My Site with lots of pages</h1>
    {props.children}
  </>
);

链接样式

此外，<A> 组件还提供了 activeClass 和 inactiveClass 属性。该属性接受一个字符串，当提供时，将根据当前路由将指定的类应用于锚标签。如果当前路由匹配 href prop，则应用 activeClass 类，否则应用 inactiveClass 类。

<A href="/users" activeClass="underlined" inactiveClass="default">
  Users
</A>

匹配路由

默认情况下，使用 <A> 组件进行匹配时会包含指定路由的所有子路由。如果 /users 是指定的路由，这将包括 /users、/users/1、/users/1/posts 等。

// Will match /users and /users/1
<A href="/users">
    Users
</A>

要仅匹配精确路由，你可以使用 end prop：

// Will match /users/1 only
<A href="/users/1" end>
    User 1
</A>
报告此页面问题