react-navigation-ts v1.0.5

带有ts签名的路由跳转

路由配置和跳转以及参数全都支持 ts 类型签名。自动匹配路由参数。

在使用 push/replace 等方法的时候，自动联想可跳转页面以及该页面参数。

使用方式

// navigation.ts

import ReactNavigation from 'react-navigation-ts';
import Layout from '@/layouts';
import Page1Query from '@/pages/page1';

const navigation = new ReactNavigation({
  home: Route.generator({
    path: '/',
    component: () => import('@/pages/home'),
  }),
  page1: Route.generator<Page1Query>({
    path: '/page1',
    component: () => import('@/pages/page1'),
    queryFormat: { a: 'number' }
  }),
  page2: Route.generator<{ id: number }>({
    path: '/page2',
    component: () => import('@/pages/page2/:id'),
    queryFormat: { id: 'number' }
  }),
  // ...
}, {
  defaultLayout: Layout
});

// app.ts
import ReactDOM from 'react-dom';
import navigation from '..../navigation.ts';

ReactDOM.render(navigation.component(), document.querySelector(`#${config.rootID}`));

// page1.tsx

import navigation from '..../navigation.ts';

export interface Page1Query {
  a: number;
  b: string;
}

export default function Page1 () {
  const query = navigation.getQuery<Page1Query>();
  return <div onClick={() => navigation.push('page2')}>page1</div>
}

routes.component

生成路由的组件

Route.generator

生成路由项