Solid Router

Use a colon (:) to define a flexible segment in a path. This segment acts as a parameter that can be accessed within the component using the useParams hook.

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

Note on Animation/Transitions: Routes sharing the same path match are treated as the same route. To force a re-render when parameters change, wrap your component in a keyed <Show>:

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

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

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

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

Nested routes allow you to define a hierarchy of components that render based on the URL path.

Key Behaviors:

• Leaf Nodes vs. Parents: Only leaf nodes (the innermost Route components) are automatically assigned a route. If you want a parent component to render at its own specific path, you must define it explicitly or use a child route with a path of /.
• Rendering via props.children: When nesting routes, you can use props.children within a parent component to specify where the child route's component should be rendered.
• Indefinite Nesting: You can nest routes as deeply as needed. Each level of nesting will wrap the child content in the parent's component structure.

// Pattern 1: Explicitly defining parent and child routes
<Route path="/users" component={Users} />
<Route path="/users/:id" component={User} />

// Pattern 2: Using props.children to render nested content
function PageWrapper(props) {
  return (
    <div>
      <h1> We love our users! </h1>
      {props.children}
      <A href="/">Back Home</A>
    </div>
  );
}

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

The previous data functions and useRouteData hook have been replaced by a built-in preload mechanism.

Benefits of Preloading:

• Link Hover Preloads: Preload functions can be executed on hover without side effects on reactivity.
• Caching Control: Supports deduping and query APIs for better cache management.
• Improved TypeScript Support: Resolves type issues when accessing route data within components without needing typeof checks.

Reproducing the old pattern (Manual Context Injection)

If you prefer the old pattern of injecting data via Context, you can disable preloads at the Router level and manually handle data fetching and injection:

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

const User = lazy(() => import("./pages/users/[id].js"));

// preload function
function preloadUser({ params, location }) {
  const [user] = createResource(() => params.id, fetchUser);
  return user;
}

// Pass it in the route definition
<Router preload={false}>
  <Route path="/users/:id" component={User} preload={preloadUser} />
</Router>;

Then, in your component, wrap the content with a Context Provider:

function User(props) {
  return (
    <UserContext.Provider value={props.data}>
      {/* my component content  */}
    </UserContext.Provider>
  );
}

// Somewhere else in the tree
function UserDetails() {
  const user = useContext(UserContext);
  // render stuff
}