用于管理路由。
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}
第一个参数 name
,是路由唯一标识,用于后续的删改查,并且 name
支持 .
用于分割层级,不过需要注意当使用 .
分层的时候,父级要使用 Outlet,让子元素能正常渲染。
第二个参数 RouteType
的 Component
支持组件形式和字符串形式,如果是字符串组件,要先通过 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}
获取路由列表。
1class RouterManager {
2 getRoutes(): Record<string, RouteType>
3}
1class MyPlugin extends Plugin {
2 async load() {
3 console.log(this.app.router.getRoutes());
4 }
5}
获取用于 useRoutes() 的数据。
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}
设置路由类型,默认为 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}
设置 basename。
1class RouterManager {
2 setBasename(basename: string): void;
3}
1class MyPlugin extends Plugin {
2 async load() {
3 this.app.router.setBasename('/')
4 }
5}
获取当前路由的实例,等同于 app.router
。
1const useRouter: () => RouterManager
1import { useRouter } from '@tachybase/client';
2
3const Demo = () => {
4 const router = useRouter();
5}