Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
621c719
Refactor imports in dynamic-routes.mdx
thomasbuilds Sep 14, 2025
a5e33e4
Update path parameters documentation
thomasbuilds Sep 14, 2025
ed440e3
Correct runtime error description for <A /> component
thomasbuilds Sep 14, 2025
7197ed6
Refine HashRouter documentation for clarity and SEO
thomasbuilds Sep 14, 2025
ba07a14
Fix typos and formatting in action.mdx
thomasbuilds Sep 14, 2025
0d18515
Fix typo in createAsync documentation
thomasbuilds Sep 14, 2025
6da1d39
Refactor getPosts to correct logic
thomasbuilds Sep 14, 2025
462ddc6
Update filter description and add keyed to Show
thomasbuilds Sep 14, 2025
a54bca6
Refactor useSubmissions example for clarity
thomasbuilds Sep 14, 2025
b94a00a
Fix code snippets and improve clarity in use-submissions.mdx
thomasbuilds Sep 14, 2025
73e1554
Refactor useSubmission example for clarity
thomasbuilds Sep 14, 2025
51e3562
Fix formatting in Vercel rewrites section example
thomasbuilds Sep 14, 2025
15d46ed
Clarify prerequisite version wording in documentation
thomasbuilds Sep 14, 2025
da1f9de
Improve clarity of Solid Router description
thomasbuilds Sep 14, 2025
db15d0c
Fix typo in use-match.mdx
thomasbuilds Sep 14, 2025
319a80f
Fix typo in useMatch documentation
thomasbuilds Sep 14, 2025
d8345f9
Fix formatting and improve clarity in useBeforeLeave docs
thomasbuilds Sep 14, 2025
084e09d
Fix wording in use-navigate documentation
thomasbuilds Sep 14, 2025
bc7766e
Addresses #1192
thomasbuilds Sep 14, 2025
658dde3
Clarify usage of useAction in actions.mdx
thomasbuilds Sep 14, 2025
aaa29bc
Merge branch 'main' into main
kodiakhq[bot] Sep 16, 2025
28fbac2
Merge branch 'main' into main
kodiakhq[bot] Sep 16, 2025
8310a8a
Merge branch 'main' into main
kodiakhq[bot] Sep 17, 2025
f13dfa5
Merge branch 'main' into main
kodiakhq[bot] Sep 17, 2025
c5bd84b
Merge branch 'main' into main
kodiakhq[bot] Sep 22, 2025
b50bb29
Merge branch 'main' into main
kodiakhq[bot] Sep 22, 2025
c5d7d09
Merge branch 'main' into main
kodiakhq[bot] Sep 22, 2025
28130b3
Merge branch 'main' into main
kodiakhq[bot] Sep 22, 2025
3765ba7
Merge branch 'main' into main
kodiakhq[bot] Sep 23, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/routes/solid-router/concepts/actions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@ In [SolidStart](/solid-start) apps, it's recommended to use the [`"use server"`]

### Using actions

To use the action, you can call it from within a component using [`useAction`](/solid-router/reference/data-apis/use-action).
This returns a function that can be called with the necessary arguments to trigger the action.
With [`useAction`](/solid-router/reference/data-apis/use-action), you can invoke an action from a component.
It returns a function that triggers the action, allowing you to include any parameters needed by the function wrapped by `action`.

```tsx del={1} ins={2,9-13}
import { action } from "@solidjs/router";
Expand Down
3 changes: 1 addition & 2 deletions src/routes/solid-router/concepts/dynamic-routes.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,7 @@ This allows for more complex routing descriptions rather than just checking the
```jsx
import { lazy } from "solid-js";
import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";
import type { SegmentValidators } from "./types";
import { Router, Route, type MatchFilters } from "@solidjs/router";

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

Expand Down
3 changes: 2 additions & 1 deletion src/routes/solid-router/concepts/path-parameters.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ import { lazy } from "solid-js";
import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";

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

const filters = {
parent: ["mom", "dad"], // allow enum values
Expand Down Expand Up @@ -119,3 +119,4 @@ In this case, `rest` will contain the rest of the path after `/users/`.

It is important to note that wildcard routes must be located at the **end of the path**.
If you place a wildcard route before the end, such as `/users/*rest/:id`, no routes will be matched.

4 changes: 2 additions & 2 deletions src/routes/solid-router/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ title: Overview
# Overview

:::note[Prerequisites]
The docs are based on latest Solid Router.
The docs are based on the latest version of Solid Router.
To use this version, you need to have Solid v1.8.4 or later installed.
:::

Solid Router is the universal router for Solid which works for rendering on the client or the server.
Solid Router is the universal router for Solid, supporting rendering on both the client and the server.
It was inspired by and combines paradigms of [React Router](https://reactrouter.com/en/main) and the [Ember Router](https://guides.emberjs.com/release/routing/).

A router provides a way to change a user's view based on the URL in the browser.
Expand Down
2 changes: 1 addition & 1 deletion src/routes/solid-router/reference/components/a.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: A
---

Solid Router exposes the `<A />` component as a wrapper around the [native anchor tag ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).
It relies on the routing context provided by the [`<Router>` component](/solid-router/reference/components/router) and if used outside, will triggers a runtime error..
It relies on the routing context provided by the [`<Router>` component](/solid-router/reference/components/router) and if used outside it will trigger a runtime error.

`<A />` supports relative and base paths. `<a />` doesn't. But `<a />` gets augmented
when JS is present via a top-level listener to the DOM, so you get the
Expand Down
10 changes: 4 additions & 6 deletions src/routes/solid-router/reference/components/hash-router.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,13 @@
title: HashRouter
---

The `HashRouter` is a top level component that manages the routing of your application.
It is a client side router that uses hash-values in the URL - providing a single-page application a way to replicate the experience of a multi-page application.
The `HashRouter` is a top-level component that manages the routing of your application. It is a client-side router that uses the hash portion of the URL, allowing a single-page application to mimic the experience of a multi-page site.

Since hash-routing provides a way for an application to run from a single HTML file, it can be used when hosting on a static file server.
Hash routing enables an application to run from a single HTML file, making it suitable for hosting on static file servers.

Compared to a browser-router, such as [`Router`](/solid-router/reference/components/router), is that this approach is not SEO friendly.
Because most search engines do not index the hash portion of a URL, they are only able to see the index page of your application when using this approach.
However, compared to a browser router like [`Router`](/solid-router/reference/components/router), this approach is not SEO-friendly. Most search engines do not index the hash portion of URLs, so they can only crawl the index page of your application.

The `root` property is used for components that wrap a matched route and require access to the router context, relevant with navigation components that use [`<A>`](/solid-router/reference/components/a) links.
The `root` prop is used for layout components that wrap matched routes and need access to the router context. This is particularly useful for navigation components that include [`<A>`](/solid-router/reference/components/a) links.

```tsx
import { render } from "solid-js/web";
Expand Down
27 changes: 13 additions & 14 deletions src/routes/solid-router/reference/data-apis/action.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -112,15 +112,15 @@ const submission = useSubmission(action, (input) => filter(input));
## Revalidate cached functions

### Revalidate all (default)
By default all cached functions will be revalidated wether the action does not return or return a "normal" response.
By default all cached functions will be revalidated whether the action does not return or return a "normal" response.

```jsx

const deleteTodo = action(async (formData: FormData) => {
const id = Number(formData.get("id"))
await api.deleteTodo(id)
// ...
return new Response("success", { status: 200 });
return new Response("success", { status: 200 });
})
```

Expand All @@ -136,15 +136,15 @@ const deleteTodo = action(async (formData: FormData) => {
const id = Number(formData.get("id"))
await api.deleteTodo(id)
return json(
{ deleted: id },
{ revalidate: ["getAllTodos", getTodos.key, getTodoByID.keyFor(id)]}
{ deleted: id },
{ revalidate: ["getAllTodos", getTodos.key, getTodoById.keyFor(id)]}
)

//or
return reload({ revalidate: ["getAllTodos", getTodos.key, getTodoByID.keyFor(id)]})
return reload({ revalidate: ["getAllTodos", getTodos.key, getTodoById.keyFor(id)]})

//or
return redirect("/", { revalidate: ["getAllTodos", getTodos.key, getTodoByID.keyFor(id)]})
return redirect("/", { revalidate: ["getAllTodos", getTodos.key, getTodoById.keyFor(id)]})

})

Expand All @@ -158,7 +158,7 @@ const deleteTodo = action(async (formData: FormData) => {
const id = Number(formData.get("id"))
await api.deleteTodo(id)
// returns a `json` without revalidating the action.
return json(`deleted ${id}`,{ revalidate: "nothing" })
return json(`deleted ${id}`, { revalidate: "nothing" })

// or reload the route without revalidating the request.
return reload({ revalidate: "nothing" })
Expand All @@ -174,21 +174,20 @@ const deleteTodo = action(async (formData: FormData) => {
Cached functions can also be revalidated by the `revalidate` helper.

```jsx
revalidate([getTodos.key, getTodoByID.keyFor(id)])
revalidate([getTodos.key, getTodoById.keyFor(id)])

```

This is also great if you want to set your own "refresh" interval e.g. poll data every 30 seconds.

```jsx
export default function TodoLayout(){

const todos = createAsync(() => getTodos())
export default function TodoLayout() {
const todos = createAsync(() => getTodos());

onMount(() => {
//30 second polling
const interval = setInterval(() => revalidate(getTodos.key),1000 * 30)
onCleanup(() => clearInterval(interval))
// 30 second polling
const interval = setInterval(() => revalidate(getTodos.key), 1000 * 30);
onCleanup(() => clearInterval(interval));
})

// ...
Expand Down
4 changes: 2 additions & 2 deletions src/routes/solid-router/reference/data-apis/create-async.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Reading it before it is ready causes Suspense/Transitions to trigger.
:::

This is light wrapper over [`createResource`](/reference/basic-reactivity/create-resource) which serves as a stand-in for a future primitive being brought to Solid core in 2.0.
It is recommended that `createAsync` be used in favor of `createResource` specially when in a **SolidStart** app because `createAsync` works better in conjunction with the [cache](/solid-router/reference/data-apis/cache) helper.
It is recommended that `createAsync` be used in favor of `createResource` especially in a **SolidStart** app because `createAsync` works better in conjunction with the [query](/solid-router/reference/data-apis/query) helper.



Expand All @@ -21,7 +21,7 @@ import { createAsync } from "@solidjs/router";
import { Suspense } from "solid-js";
import { getUser } from "./api";

export function Component () => {
export function Component() {
const user = createAsync(() => getUser(params.id));

return (
Expand Down
6 changes: 3 additions & 3 deletions src/routes/solid-router/reference/data-apis/revalidate.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ import { For } from "solid-js";
import { query, createAsync, revalidate } from "@solidjs/router";

const getPosts = query(async () => {
return await fetch("https://api.com/posts").then((response) =>
response.json()
);
const response = await fetch("https://api.com/posts");
const data = await response.json();
return data;
}, "posts");

function Posts() {
Expand Down
Loading