#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}

1class RouterManager {
2    add(name: string, route: RouteType): void
3}

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

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}

1class RouterManager {
2    getRoutes(): Record<string, RouteType>
3}

1class MyPlugin extends Plugin {
2    async load() {
3        console.log(this.app.router.getRoutes());
4    }
5}

1class RouterManager {
2    getRoutesTree(): RouteObject[]
3}

1class MyPlugin extends Plugin {
2    async load() {
3        const routes = this.app.router.getRoutesTree();
4    }
5}

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}

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}

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}

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}

1class RouterManager {
2    setBasename(basename: string): void;
3}

1class MyPlugin extends Plugin {
2    async load() {
3        this.app.router.setBasename('/')
4    }
5}

1const useRouter: () => RouterManager

1import { useRouter } from '@tachybase/client';
2
3const Demo = () => {
4    const router = useRouter();
5}