Solid Docs
Routing

Linking Routes

Edit this page

Once routes have been created within an application, using anchor tags will help users navigate between different views or pages.

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


const Users = lazy(() => import("./pages/Users"));
const Home = lazy(() => import("./pages/Home"));


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


render(
  () => (
    <Router root={App}>
      <Route path="/users" component={Users} />
      <Route path="/" component={Home} />
    </Router>
  ),
  document.getElementById("app")
);

<A> Component

Solid Router also offers an <A> component. Similar to the HTML anchor tag, the <A> component is similar but it supports automatically applying the base URL path and the relative paths.

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


const Users = lazy(() => import("./pages/Users"));
const Home = lazy(() => import("./pages/Home"));


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


render(
  () => (
    <Router root={App}>
      <Route path="/users" component={Users} />
      <Route path="/" component={Home} />
    </Router>
  ),
  document.getElementById("app")
);

In addition, the <A> component has an active class if its href matches the current location, and inactive otherwise. This provides the link with a CSS class to show when the link is active or inactive.

<A
  href="/users"
  active="underlined"
  inactive="default"
  >
  About
</A>

By default, matching using the <A> component includes locations that are descendants (eg. /users and /users/123). This component offers the end prop, which takes in a boolean to prevent matching these. This can be useful when links to the root route (/) would match everything.

Report an issue with this page