https://github.com/liascode/preact-hashish-router
Simple preact router with hash and browser routing
https://github.com/liascode/preact-hashish-router
Last synced: about 1 month ago
JSON representation
Simple preact router with hash and browser routing
- Host: GitHub
- URL: https://github.com/liascode/preact-hashish-router
- Owner: LiasCode
- Created: 2025-02-18T20:14:52.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-21T19:00:19.000Z (2 months ago)
- Last Synced: 2025-03-29T06:11:15.222Z (about 2 months ago)
- Language: TypeScript
- Size: 94.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Preact Hashish Router
## Features
- `hash` and `browser` routing types.
- Support for lazy-loaded routes (`lazy` loading).
- Error handling integration with `ErrorRoute`.
- Fully typed.
- Ultra lightweight.
- No external dependencies.
## Installation
```bash
npm install preact-hashish-router@latest
```
## Usage
### Context Setup
First, ensure your application is wrapped within the router context. This will allow you to access routes and related functions.
```tsx
import { ErrorRoute, Route, Router, RouterErrorBoundary } from "preact-hashish-router";
import _404 from "./routes/404";
import AboutPage from "./routes/About";
import HomePage from "./routes/Home";
import ProductPage from "./routes/Product";
export default function App() {
return (
{/* <-- or browser */}
<_404 />
);
}
```
### Using the `useRouter` Hook
The `useRouter` hook gives you access to the router context to programmatically navigate or retrieve information about the current route.
```tsx
import { useRouter } from "preact-hashish-router";
function HomePage() {
const router = useRouter();
function goToAbout() {
router.go("/about");
}
return (
Home Page
Go to About
);
}
```
### `` Component for Navigation
```tsx
import { A } from "preact-hashish-router";
export default function Header() {
return (
Home
About
);
}
```
### `` Component
```tsx
import { Redirect } from "preact-hashish-router";
export default function ProductPage() {
return (
<>
Home
About
>
);
}
```
## Development
If you have any improvements or find any issues, feel free to contribute or open an issue in the associated repository.