Socket
Socket
Sign inDemoInstall

@solidjs/router

Package Overview
Dependencies
Maintainers
2
Versions
60
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@solidjs/router - npm Package Compare versions

Comparing version 0.8.2 to 0.8.3

14

dist/components.d.ts

@@ -31,3 +31,3 @@ import type { Component, JSX } from "solid-js";

export declare const Routes: (props: RoutesProps) => JSX.Element;
export declare const useRoutes: (routes: RouteDefinition | RouteDefinition[], base?: string) => () => JSX.Element;
export declare const useRoutes: (routes: RouteDefinition | RouteDefinition[] | Readonly<RouteDefinition[]>, base?: string) => () => JSX.Element;
export type RouteProps<S extends string> = {

@@ -50,8 +50,8 @@ path: S | S[];

href: string;
replace?: boolean;
noScroll?: boolean;
state?: unknown;
inactiveClass?: string;
activeClass?: string;
end?: boolean;
replace?: boolean | undefined;
noScroll?: boolean | undefined;
state?: unknown | undefined;
inactiveClass?: string | undefined;
activeClass?: string | undefined;
end?: boolean | undefined;
}

@@ -58,0 +58,0 @@ export declare function A(props: AnchorProps): JSX.Element;

4

dist/index.js

@@ -385,4 +385,4 @@ import { isServer, delegateEvents, createComponent as createComponent$1, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';

const setSearchParams = (params, options) => {
const searchString = untrack(() => mergeSearchString(location.search, params));
navigate(location.pathname + searchString + location.hash, {
const searchString = untrack(() => location.pathname + mergeSearchString(location.search, params) + location.hash);
navigate(searchString, {
scroll: false,

@@ -389,0 +389,0 @@ resolve: false,

4

dist/routing.js

@@ -43,4 +43,4 @@ import { createComponent, createContext, createMemo, createRenderEffect, createSignal, on, onCleanup, untrack, useContext, startTransition, resetErrorBoundaries } from "solid-js";

const setSearchParams = (params, options) => {
const searchString = untrack(() => mergeSearchString(location.search, params));
navigate(location.pathname + searchString + location.hash, {
const searchString = untrack(() => location.pathname + mergeSearchString(location.search, params) + location.hash);
navigate(searchString, {
scroll: false,

@@ -47,0 +47,0 @@ resolve: false,

2

dist/types.d.ts

@@ -37,3 +37,3 @@ import { Component, JSX } from "solid-js";

export interface RouteDataFuncArgs<T = unknown> {
data: T extends RouteDataFunc ? ReturnType<T> : T;
data: T extends RouteDataFunc<infer _, infer R> ? R : T;
params: Params;

@@ -40,0 +40,0 @@ location: Location;

4

package.json

@@ -9,3 +9,3 @@ {

"license": "MIT",
"version": "0.8.2",
"version": "0.8.3",
"homepage": "https://github.com/solidjs/solid-router#readme",

@@ -47,3 +47,3 @@ "repository": {

"solid-jest": "^0.2.0",
"solid-js": "^1.6.6",
"solid-js": "^1.7.9",
"typescript": "^4.9.4"

@@ -50,0 +50,0 @@ },

273

README.md

@@ -33,2 +33,3 @@ <p>

- [useBeforeLeave](#usebeforeleave)
- [SPAs in Deployed Environments](#spas-in-deployed-environments)

@@ -69,11 +70,11 @@ ## Getting Started

```jsx
import { Routes, Route } from "@solidjs/router"
import { Routes, Route } from "@solidjs/router";
export default function App() {
return <>
return (
<>
<h1>My Site with Lots of Pages</h1>
<Routes>
</Routes>
<Routes></Routes>
</>
);
}

@@ -85,9 +86,10 @@ ```

```jsx
import { Routes, Route } from "@solidjs/router"
import { Routes, Route } from "@solidjs/router";
import Home from "./pages/Home"
import Users from "./pages/Users"
import Home from "./pages/Home";
import Users from "./pages/Users";
export default function App() {
return <>
return (
<>
<h1>My Site with Lots of Pages</h1>

@@ -97,5 +99,9 @@ <Routes>

<Route path="/" component={Home} />
<Route path="/about" element={<div>This site was made with Solid</div>} />
<Route
path="/about"
element={<div>This site was made with Solid</div>}
/>
</Routes>
</>
);
}

@@ -110,3 +116,3 @@ ```

import { lazy } from "solid-js";
import { Routes, Route } from "@solidjs/router"
import { Routes, Route } from "@solidjs/router";
const Users = lazy(() => import("./pages/Users"));

@@ -116,3 +122,4 @@ const Home = lazy(() => import("./pages/Home"));

export default function App() {
return <>
return (
<>
<h1>My Site with Lots of Pages</h1>

@@ -122,5 +129,9 @@ <Routes>

<Route path="/" component={Home} />
<Route path="/about" element={<div>This site was made with Solid</div>} />
<Route
path="/about"
element={<div>This site was made with Solid</div>}
/>
</Routes>
</>
);
}

@@ -135,3 +146,3 @@ ```

import { lazy } from "solid-js";
import { Routes, Route, A } from "@solidjs/router"
import { Routes, Route, A } from "@solidjs/router";
const Users = lazy(() => import("./pages/Users"));

@@ -141,3 +152,4 @@ const Home = lazy(() => import("./pages/Home"));

export default function App() {
return <>
return (
<>
<h1>My Site with Lots of Pages</h1>

@@ -151,5 +163,9 @@ <nav>

<Route path="/" component={Home} />
<Route path="/about" element={<div>This site was made with Solid</div>} />
<Route
path="/about"
element={<div>This site was made with Solid</div>}
/>
</Routes>
</>
);
}

@@ -160,25 +176,25 @@ ```

| prop | type | description |
| ------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| href | string | The path of the route to navigate to. This will be resolved relative to the route that the link is in, but you can preface it with `/` to refer back to the root. |
| noScroll | boolean | If true, turn off the default behavior of scrolling to the top of the new page |
| replace | boolean | If true, don't add a new entry to the browser history. (By default, the new page will be added to the browser history, so pressing the back button will take you to the previous route.) |
| state | unknown | [Push this value](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) to the history stack when navigating |
| inactiveClass | string | The class to show when the link is inactive (when the current location doesn't match the link) |
| activeClass | string | The class to show when the link is active |
| end | boolean | If `true`, only considers the link to be active when the curent location matches the `href` exactly; if `false`, check if the current location _starts with_ `href` |
| prop | type | description |
|----------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| href | string | The path of the route to navigate to. This will be resolved relative to the route that the link is in, but you can preface it with `/` to refer back to the root. |
| noScroll | boolean | If true, turn off the default behavior of scrolling to the top of the new page |
| replace | boolean | If true, don't add a new entry to the browser history. (By default, the new page will be added to the browser history, so pressing the back button will take you to the previous route.) |
| state | unknown | [Push this value](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) to the history stack when navigating | |
| inactiveClass | string | The class to show when the link is inactive (when the current location doesn't match the link) |
| activeClass | string | The class to show when the link is active |
| end | boolean | If `true`, only considers the link to be active when the curent location matches the `href` exactly; if `false`, check if the current location _starts with_ `href` |
### The Navigate Component
### The Navigate Component
Solid Router provides a `Navigate` component that works similarly to `A`, but it will _immediately_ navigate to the provided path as soon as the component is rendered. It also uses the `href` prop, but you have the additional option of passing a function to `href` that returns a path to navigate to:
```jsx
function getPath ({navigate, location}) {
//navigate is the result of calling useNavigate(); location is the result of calling useLocation().
//You can use those to dynamically determine a path to navigate to
function getPath({ navigate, location }) {
// navigate is the result of calling useNavigate(); location is the result of calling useLocation().
// You can use those to dynamically determine a path to navigate to
return "/some-path";
}
//Navigating to /redirect will redirect you to the result of getPath
<Route path="/redirect" element={<Navigate href={getPath}/>}/>
// Navigating to /redirect will redirect you to the result of getPath
<Route path="/redirect" element={<Navigate href={getPath} />} />;
```

@@ -192,3 +208,3 @@

import { lazy } from "solid-js";
import { Routes, Route } from "@solidjs/router"
import { Routes, Route } from "@solidjs/router";
const Users = lazy(() => import("./pages/Users"));

@@ -199,3 +215,4 @@ const User = lazy(() => import("./pages/User"));

export default function App() {
return <>
return (
<>
<h1>My Site with Lots of Pages</h1>

@@ -206,5 +223,9 @@ <Routes>

<Route path="/" component={Home} />
<Route path="/about" element={<div>This site was made with Solid</div>} />
<Route
path="/about"
element={<div>This site was made with Solid</div>}
/>
</Routes>
</>
);
}

@@ -215,4 +236,10 @@ ```

You can then access that `id` from within a route component with `useParams`:
You can then access that `id` from within a route component with `useParams`.
> **Note on Animation/Transitions**:
> Routes that share the same path match will be treated as the same route. If you want to force re-render you can wrap your component in a keyed `<Show>` like:
> ```js
><Show when={params.something} keyed><MyComponent></Show>
>```
---

@@ -224,5 +251,5 @@

```tsx
import {lazy} from "solid-js";
import {Routes, Route} from "@solidjs/router"
import type {SegmentValidators} from "./types";
import { lazy } from "solid-js";
import { Routes, Route } from "@solidjs/router";
import type { SegmentValidators } from "./types";

@@ -234,14 +261,20 @@ const Users = lazy(() => import("./pages/Users"));

const filters: MatchFilters = {
parent: ['mom', 'dad'], // allow enum values
parent: ["mom", "dad"], // allow enum values
id: /^\d+$/, // only allow numbers
withHtmlExtension: (v: string) => v.length > 5 && v.endsWith('.html') // we want an `*.html` extension
}
withHtmlExtension: (v: string) => v.length > 5 && v.endsWith(".html"), // we want an `*.html` extension
};
export default function App() {
return <>
return (
<>
<h1>My Site with Lots of Pages</h1>
<Routes>
<Route path="/users/:parent/:id/:withHtmlExtension" component={User} matchFilters={filters}/>
<Route
path="/users/:parent/:id/:withHtmlExtension"
component={User}
matchFilters={filters}
/>
</Routes>
</>
);
}

@@ -264,7 +297,6 @@ ```

```jsx
//async fetching function
// async fetching function
import { fetchUser } ...
export default function User () {
const params = useParams();

@@ -283,4 +315,4 @@

```jsx
//Matches stories and stories/123 but not stories/123/comments
<Route path='/stories/:id?' element={<Stories/>} />
// Matches stories and stories/123 but not stories/123/comments
<Route path="/stories/:id?" element={<Stories />} />
```

@@ -293,4 +325,4 @@

```jsx
//Matches any path that begins with foo, including foo/, foo/a/, foo/a/b/c
<Route path='foo/*' component={Foo}/>
// Matches any path that begins with foo, including foo/, foo/a/, foo/a/b/c
<Route path="foo/*" component={Foo} />
```

@@ -301,3 +333,3 @@

```jsx
<Route path='foo/*any' element={<div>{useParams().any}</div>}/>
<Route path="foo/*any" element={<div>{useParams().any}</div>} />
```

@@ -312,7 +344,8 @@

```jsx
//Navigating from login to register does not cause the Login component to re-render
<Route path={["login", "register"]} component={Login}/>
// Navigating from login to register does not cause the Login component to re-render
<Route path={["login", "register"]} component={Login} />
```
## Data Functions
In the [above example](#dynamic-routes), the User component is lazy-loaded and then the data is fetched. With route data functions, we can instead start fetching the data parallel to loading the route, so we can use the data as soon as possible.

@@ -329,3 +362,3 @@

//Data function
// Data function
function UserData({params, location, navigate, data}) {

@@ -336,3 +369,3 @@ const [user] = createResource(() => params.id, fetchUser);

//Pass it in the route definition
// Pass it in the route definition
<Route path="/users/:id" component={User} data={UserData} />;

@@ -344,4 +377,5 @@ ```

```jsx
//pages/users/[id].js
import { useRouteData } from '@solidjs/router';
// pages/users/[id].js
import { useRouteData } from "@solidjs/router";
export default function User() {

@@ -355,8 +389,8 @@ const user = useRouteData();

| key | type | description |
|-----------|------------------------------------------------|-------------------------------------------------------------------------------------------------------------|
| params | object | The route parameters (same value as calling `useParams()` inside the route component) |
| location | `{ pathname, search, hash, query, state, key}` | An object that you can use to get more information about the path (corresponds to [`useLocation()`](#uselocation)) |
| navigate | `(to: string, options?: NavigateOptions) => void` | A function that you can call to navigate to a different route instead (corresponds to [`useNavigate()`](#usenavigate)) |
| data | unknown | The data returned by the [parent's](#nested-routes) data function, if any. (Data will pass through any intermediate nesting.) |
| key | type | description |
| -------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| params | object | The route parameters (same value as calling `useParams()` inside the route component) |
| location | `{ pathname, search, hash, query, state, key}` | An object that you can use to get more information about the path (corresponds to [`useLocation()`](#uselocation)) |
| navigate | `(to: string, options?: NavigateOptions) => void` | A function that you can call to navigate to a different route instead (corresponds to [`useNavigate()`](#usenavigate)) |
| data | unknown | The data returned by the [parent's](#nested-routes) data function, if any. (Data will pass through any intermediate nesting.) |

@@ -377,2 +411,3 @@ A common pattern is to export the data function that corresponds to a route in a dedicated `route.data.js` file. This way, the data function can be imported without loading anything else.

## Nested Routes
The following two route definitions have the same result:

@@ -383,2 +418,3 @@

```
```jsx

@@ -389,2 +425,3 @@ <Route path="/users">

```
`/users/:id` renders the `<User/>` component, and `/users/` is an empty route.

@@ -400,7 +437,7 @@

//This works
// This works
<Route path="/users" component={Users} />
<Route path="/users/:id" component={User} />
//This also works
// This also works
<Route path="/users">

@@ -413,18 +450,22 @@ <Route path="/" component={Users} />

You can also take advantage of nesting by adding a parent element with an `<Outlet/>`.
```jsx
import { Outlet } from "@solidjs/router";
function PageWrapper () {
return <div>
function PageWrapper() {
return (
<div>
<h1> We love our users! </h1>
<Outlet/>
<Outlet />
<A href="/">Back Home</A>
</div>
);
}
<Route path="/users" component={PageWrapper}>
<Route path="/" component={Users}/>
<Route path="/" component={Users} />
<Route path="/:id" component={User} />
</Route>
</Route>;
```
The routes are still configured the same, but now the route elements will appear inside the parent element where the `<Outlet/>` was declared.

@@ -435,5 +476,19 @@

```jsx
<Route path='/' element={<div>Onion starts here <Outlet /></div>}>
<Route path='layer1' element={<div>Another layer <Outlet /></div>}>
<Route path='layer2' element={<div>Innermost layer</div>}></Route>
<Route
path="/"
element={
<div>
Onion starts here <Outlet />
</div>
}
>
<Route
path="layer1"
element={
<div>
Another layer <Outlet />
</div>
}
>
<Route path="layer2" element={<div>Innermost layer</div>}></Route>
</Route>

@@ -450,5 +505,7 @@ </Route>

```jsx
import { Router, hashIntegration } from '@solidjs/router'
import { Router, hashIntegration } from "@solidjs/router";
<Router source={hashIntegration()}><App /></Router>
<Router source={hashIntegration()}>
<App />
</Router>;
```

@@ -461,5 +518,7 @@

```jsx
import { Router, memoryIntegration } from '@solidjs/router'
import { Router, memoryIntegration } from "@solidjs/router";
<Router source={memoryIntegration()}><App /></Router>
<Router source={memoryIntegration()}>
<App />
</Router>;
```

@@ -479,3 +538,3 @@

path: "/users",
component: lazy(() => import("/pages/users.js"))
component: lazy(() => import("/pages/users.js")),
},

@@ -486,15 +545,24 @@ {

children: [
{ path: "/", component: lazy(() => import("/pages/users/[id]/index.js")) },
{ path: "/settings", component: lazy(() => import("/pages/users/[id]/settings.js")) },
{ path: "/*all", component: lazy(() => import("/pages/users/[id]/[...all].js")) }
]
{
path: "/",
component: lazy(() => import("/pages/users/[id]/index.js")),
},
{
path: "/settings",
component: lazy(() => import("/pages/users/[id]/settings.js")),
},
{
path: "/*all",
component: lazy(() => import("/pages/users/[id]/[...all].js")),
},
],
},
{
path: "/",
component: lazy(() => import("/pages/index.js"))
component: lazy(() => import("/pages/index.js")),
},
{
path: "/*all",
component: lazy(() => import("/pages/[...all].js"))
}
component: lazy(() => import("/pages/[...all].js")),
},
];

@@ -527,2 +595,3 @@

```
## Router Primitives

@@ -552,3 +621,3 @@

__Note:__ The state is serialized using the [structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) which does not support all object types.
**Note:** The state is serialized using the [structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) which does not support all object types.

@@ -585,3 +654,9 @@ ```js

<span>Page: {searchParams.page}</span>
<button onClick={() => setSearchParams({ page: (parseInt(searchParams.page) || 0) + 1 })}>Next Page</button>
<button
onClick={() =>
setSearchParams({ page: (parseInt(searchParams.page) || 0) + 1 })
}
>
Next Page
</button>
</div>

@@ -633,3 +708,3 @@ );

`useBeforeLeave` takes a function that will be called prior to leaving a route. The function will be called with:
`useBeforeLeave` takes a function that will be called prior to leaving a route. The function will be called with:

@@ -644,2 +719,3 @@ - from (_Location_): current location (before change).

Example usage:
```js

@@ -659,1 +735,24 @@ useBeforeLeave((e: BeforeLeaveEventArgs) => {

```
## SPAs in Deployed Environments
When deploying applications that use a client side router that does not rely on Server Side Rendering you need to handle redirects to your index page so that loading from other URLs does not cause your CDN or Hosting to return not found for pages that aren't actually there.
Each provider has a different way of doing this. For example on Netlify you create a `_redirects` file that contains:
```sh
/* /index.html 200
```
On Vercel you add a rewrites section to your `vercel.json`:
```json
{
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
}
```
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc