Navigation

Once your routes have been created within an application, anchor tags can be used to help users navigate between different views or pages.

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

While you can use the native HTML anchor tag, Solid Router does provide a <A> component. While similar to an anchor tag, the <A> component supports automatically applying the base URL path and relative paths.

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

Styling links

In addition, the <A> component also provides an activeClass and inactiveClass prop. This prop accepts a string that, when provided, will apply the specified class to the anchor tag based on the current route. If the current route matches the href prop, the activeClass class will be applied, otherwise the inactiveClass class will be applied.

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

Matching routes

By default, matching using the <A> component will include locations that are descendants of the specified route. This would include /users, /users/1, /users/1/posts, etc. if /users is the specified route.

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

To match the exact route only, you can use the end prop:

// Will match /users/1 only
<A href="/users/1" end>
    User 1
</A>