Svelte Navigator

Overview

Svelte Navigator is an accessible and relatively lightweight Single Page App Router inspired by react-router and @reach/router. It provides simple, accessible routing for Svelte applications. The package offers features such as accessible routing, relative routing, nestable routes, automatic route ranking, React-esque hooks API, HTML5 history mode, SSR support, and TypeScript readiness.

Features

• Accessible routing: The Router manages focus in your app automatically and makes announcements to screen reader users.
• Relative routing: Paths and links are relative to the parent Route and Router.
• Nestable Routes: Allows for easy, flexible, and reusable component composition.
• Automatic route ranking: The Router chooses the best match automatically, so you don’t need to worry about the order of your Routes.
• Route parameters: Supports user/:id and (namable) wildcards blog/*, blog/*wildcardName.
• React-esque hooks API: Provides hooks for accessing parts of the Router context.
• Nestable Routers: Allows for seamless merging of many smaller apps.
• HTML5 history mode: Default mode with Memory mode as fallback or for testing.
• SSR support: Supports Server Side Rendering.
• TypeScript readiness: Compatible with TypeScript.

Installation

To install Svelte Navigator, use either yarn or npm:

With yarn:

yarn add svelte-navigator

With npm:

npm install svelte-navigator

Summary

Svelte Navigator is a powerful package that provides simple and accessible routing for Svelte applications. It offers a range of features such as automatic route ranking, relative routing, and nestable routes. With its support for HTML5 history mode and SSR, it can be easily integrated into various project setups. Svelte Navigator is also TypeScript ready, ensuring compatibility and type safety.