preact-w-router v0.1.3

preact-w-router

类 Router

push replace back addRouterChangeListener removeRouterChangeListener

History 路由

组件: History 路由管理: HistoryRouter

Hash 路由

组件: Hash 路由管理: HashRouter

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

服务端路由

创建服务端路由 createServerRouter

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

使用 History 路由

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 路由

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);

使用路由懒加载

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

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

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

使用服务端路由

服务端路由仅支持 history 路由

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,
    }))
  );
});

路由操作

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

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

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

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