# preact-w-router

> preact路由

Latest version **0.1.3** (published 2021-09-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install preact-w-router
pnpm add preact-w-router
yarn add preact-w-router
bun add preact-w-router
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2021-09-03 |
| First published | 2021-08-31 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | jaran |
| Maintainers | jaran_www |

## Links

- npm: https://www.npmjs.com/package/preact-w-router
- npm.io page: https://npm.io/package/preact-w-router

## Recent versions

- 0.1.3 (latest) — 2021-09-03
- 0.1.2 — 2021-09-03
- 0.1.1 — 2021-09-03
- 0.1.0 — 2021-09-02
- 0.0.9 — 2021-09-02
- 0.0.8 — 2021-09-02
- 0.0.7 — 2021-09-01
- 0.0.6 — 2021-09-01
- 0.0.5 — 2021-09-01
- 0.0.4 — 2021-09-01
- 0.0.3 — 2021-09-01
- 0.0.2 — 2021-08-31
- 0.0.1 — 2021-08-31

## README

# preact-w-router

## 类 Router

push
replace
back
addRouterChangeListener
removeRouterChangeListener

## History 路由

组件: History
路由管理: HistoryRouter

## Hash 路由

组件: Hash
路由管理: HashRouter

使用 hash 路由时 不要使用a标签锚点链接

## 服务端路由

创建服务端路由 createServerRouter

hash是不会携带到服务端, 因此使用hash时就无法正常使用服务端渲染

## 使用 History 路由

```js
import { h, render } from 'preact';
import { History } from 'preact-w-router';

const routes = [
  {
    path: '/', // 访问路径 => /
    meta: {
      // 路由描述信息
    },
    component: () => Home,
  },
  {
    path: '/hello-tom',
    component: () => About,
    children: [
      {
        path: '/small', // 访问路径 => /hello-tom/small 
        component: () => AboutMe,
      },
    ],
  },
];

render(<History {routes} />, document.body);
```

## 使用 Hash 路由

```js
import { h, render } from 'preact';
import { Hash } from 'preact-w-router';

const routes = [
  {
    path: '/', // 访问路径 => /
    meta: {
      // 路由描述信息
    },
    component: () => Home,
  },
  {
    path: '/hello-tom',
    component: () => About,
    children: [
      {
        path: '/small', // 访问路径 => /hello-tom/small 
        component: () => AboutMe,
      },
    ],
  },
];

render(<Hash {routes} />, document.body);
```

## 使用路由懒加载

```js
import { h, render } from 'preact';
import { History } from 'preact-w-router';

const routes = [
  {
    path: '/',
    component: () => import('components/Home'),
  },
];

render(<History {routes} />, document.body);
```

## 使用服务端路由

服务端路由仅支持 history 路由

```node
const express = require('express');
const render = require('preact-render-to-string');
const { createServerRouter } = require('preact-w-router');

server.all('*', async (res, req) => {
  req.send(
    render(await createServerRouter({
      path: res.path,
      routes,
    }))
  );
});
```

## 路由操作

```js
import { HistoryRouter, HashRouter } from 'preact-w-router';

// 路由入栈
HistoryRouter.push({ path });
HashRouter.push({ path });

// 路由重定向
HistoryRouter.replace({ path });
HashRouter.replace({ path });

// 路由出栈
HistoryRouter.pop();
HashRouter.pop();
```

---
_Source: https://npm.io/package/preact-w-router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._