RouterManager

用于管理路由。

1import { ComponentType } from 'react';
2import { RouteObject } from 'react-router-dom';
3
4interface RouteType extends Omit<RouteObject, 'children' | 'Component'> {
5  Component?: ComponentType<T> | string;
6}
7
8class RouterManager {
9    add(name: string, route: RouteType): void;
10    getRoutes(): Record<string, RouteType>;
11    getRoutesTree(): RouteObject[];
12    get(name: string): RouteType;
13    has(name: string): boolean;
14    remove(name: string): void;
15    setType(type: 'browser' | 'memory' | 'hash'): void;
16    setBasename(basename: string): void;
17}

实例方法

router.add()

添加一条路由。

  • 类型
1class RouterManager {
2    add(name: string, route: RouteType): void
3}
  • 详情

第一个参数 name,是路由唯一标识,用于后续的删改查,并且 name 支持 . 用于分割层级,不过需要注意当使用 . 分层的时候,父级要使用 Outlet,让子元素能正常渲染。

第二个参数 RouteTypeComponent 支持组件形式和字符串形式,如果是字符串组件,要先通过 app.addComponents 进行注册。

  • 示例

单层级路由。

1class MyPlugin extends Plugin {
2    async load() {
3      this.app.router.add('home', {
4            path: '/',
5            Component: () => <div>home page</div>
6        })
7        this.app.router.add('login', {
8            path: '/login',
9            element: <div>login page</div>
10        })
11    }
12}
1import { useNavigate } from 'react-router-dom';
2import { Plugin, Application } from '@tachybase/client';
3
4const HomePage = () => {
5  const navigate = useNavigate();
6  return <div>
7    <div>home page</div>
8    <button onClick={() => navigate('/login')}>GO To LoginPage</button>
9  </div>
10}
11
12const LoginPage = () => {
13  const navigate = useNavigate();
14  return <div>
15    <div>login page</div>
16    <button onClick={() => navigate('/')}>GO To HomePage</button>
17  </div>
18}
19
20class MyPlugin extends Plugin {
21    async load() {
22      this.app.router.add('home', {
23            path: '/',
24            Component: HomePage
25        })
26        this.app.router.add('login', {
27            path: '/login',
28            Component: LoginPage
29        })
30    }
31}
32
33
34const app = new Application({
35    plugins: [MyPlugin],
36    router: {
37        type: 'memory',
38        initialEntries: ['/'],
39    }
40});
41
42export default app.getRootComponent();

多层级路由。

1import { Plugin } from '@tachybase/client';
2import { Outlet } from 'react-router-dom';
3
4const AdminLayout = () =>{
5    return <div>
6        <div>This is admin layout</div>
7        <Outlet />
8    </div>
9}
10
11const AdminSettings = () => {
12    return <div>This is admin settings page</div>
13}
14
15class MyPlugin extends Plugin {
16    async load() {
17        this.app.router.add('admin', {
18            path: '/admin',
19            Component: AdminLayout
20        })
21        this.app.router.add('admin.settings', {
22            path: '/admin/settings',
23            Component: AdminSettings ,
24        })
25    }
26}
1import { useNavigate, Outlet } from 'react-router-dom';
2import { Plugin, Application } from '@tachybase/client';
3
4const AdminLayout = () =>{
5    return <div>
6        <div>This is admin layout</div>
7        <Outlet />
8    </div>
9}
10
11const AdminSettings = () => {
12    return <div>This is admin settings page</div>
13}
14
15class MyPlugin extends Plugin {
16    async load() {
17      this.app.router.add('admin', {
18          path: '/admin',
19          Component: AdminLayout
20      })
21      this.app.router.add('admin.settings', {
22          path: '/admin/settings',
23          Component: AdminSettings ,
24      })
25    }
26}
27
28
29const app = new Application({
30    plugins: [MyPlugin],
31    router: {
32        type: 'memory',
33        initialEntries: ['/admin/settings'],
34    }
35});
36
37export default app.getRootComponent();

Component 参数为字符串。

1const LoginPage = () => {
2    return <div>login page</div>
3}
4
5class MyPlugin extends Plugin {
6    async load() {
7        // 通过 app.addComponents 进行注册
8        this.app.addComponents({ LoginPage })
9
10        this.app.router.add('login', {
11            path: '/login',
12            Component: 'LoginPage', // 这里可以使用字符串了
13        })
14    }
15}

router.getRoutes()

获取路由列表。

  • 类型
1class RouterManager {
2    getRoutes(): Record<string, RouteType>
3}
  • 示例
1class MyPlugin extends Plugin {
2    async load() {
3        console.log(this.app.router.getRoutes());
4    }
5}

router.getRoutesTree()

获取用于 useRoutes() 的数据。

  • 类型
1class RouterManager {
2    getRoutesTree(): RouteObject[]
3}
  • 示例
1class MyPlugin extends Plugin {
2    async load() {
3        const routes = this.app.router.getRoutesTree();
4    }
5}

router.get()

获取单个路由配置。

  • 类型
1class RouterManager {
2    get(name: string): RouteType
3}
  • 示例
1class MyPlugin extends Plugin {
2    async load() {
3        const adminRoute = this.app.router.get('admin')
4        const adminSettings = this.app.router.get('admin.settings')
5    }
6}

router.has()

判断是否添加过路由。

  • 类型
1class RouterManager {
2    has(name: string): boolean;
3}
  • 示例
1class MyPlugin extends Plugin {
2    async load() {
3        const hasAdminRoute = this.app.router.has('admin')
4        const hasAdminSettings = this.app.router.has('admin.settings')
5    }
6}

router.remove()

移除路由配置。

  • 类型
1class RouterManager {
2    remove(name: string): void;
3}
  • 示例
1class MyPlugin extends Plugin {
2    async load() {
3        this.app.router.remove('admin')
4        this.app.router.remove('admin.settings')
5    }
6}

router.setType()

设置路由类型,默认为 browser

  • 类型
1class RouterManager {
2    setType(type: 'browser' | 'memory' | 'hash'): void;
3}
1class MyPlugin extends Plugin {
2    async load() {
3        this.app.router.setType('hash')
4    }
5}

router.setBasename()

设置 basename

  • 类型
1class RouterManager {
2    setBasename(basename: string): void;
3}
  • 示例
1class MyPlugin extends Plugin {
2    async load() {
3        this.app.router.setBasename('/')
4    }
5}

Hooks

useRouter()

获取当前路由的实例,等同于 app.router

  • 类型
1const useRouter: () => RouterManager
  • 示例
1import { useRouter } from '@tachybase/client';
2
3const Demo = () => {
4    const router = useRouter();
5}