b8d0ad8fbc
* feat: update docs * feat: update docs * fix: update docs * Add files via upload * Add files via upload * Update the-first-app.md * Update the-first-app.md * Update v08-changelog.md * feat: update docs Co-authored-by: Zhou <zhou.working@gmail.com>
63 lines
1.6 KiB
Markdown
63 lines
1.6 KiB
Markdown
# UI 路由
|
||
|
||
NocoBase Client 的 Router 基于 [React Router](https://v5.reactrouter.com/web/guides/quick-start)，可以通过 `<RouteSwitch routes={[]} />` 来配置 ui routes，例子如下：
|
||
|
||
```tsx
|
||
/**
|
||
* defaultShowCode: true
|
||
*/
|
||
import React from 'react';
|
||
import { Link, MemoryRouter as Router } from 'react-router-dom';
|
||
import { RouteRedirectProps, RouteSwitchProvider, RouteSwitch } from '@nocobase/client';
|
||
|
||
const Home = () => <h1>Home</h1>;
|
||
const About = () => <h1>About</h1>;
|
||
|
||
const routes: RouteRedirectProps[] = [
|
||
{
|
||
type: 'route',
|
||
path: '/',
|
||
exact: true,
|
||
component: 'Home',
|
||
},
|
||
{
|
||
type: 'route',
|
||
path: '/about',
|
||
component: 'About',
|
||
},
|
||
];
|
||
|
||
export default () => {
|
||
return (
|
||
<RouteSwitchProvider components={{ Home, About }}>
|
||
<Router initialEntries={['/']}>
|
||
<Link to={'/'}>Home</Link>, <Link to={'/about'}>About</Link>
|
||
<RouteSwitch routes={routes} />
|
||
</Router>
|
||
</RouteSwitchProvider>
|
||
);
|
||
};
|
||
```
|
||
|
||
在完整的 NocoBase 应用里，可以类似以下的的方式扩展 Route：
|
||
|
||
```tsx | pure
|
||
import { RouteSwitchContext } from '@nocobase/client';
|
||
import React, { useContext } from 'react';
|
||
|
||
const HelloWorld = () => {
|
||
return <div>Hello ui router</div>;
|
||
};
|
||
|
||
export default React.memo((props) => {
|
||
const ctx = useContext(RouteSwitchContext);
|
||
ctx.routes.push({
|
||
type: 'route',
|
||
path: '/hello-world',
|
||
component: HelloWorld,
|
||
});
|
||
return <RouteSwitchContext.Provider value={ctx}>{props.children}</RouteSwitchContext.Provider>;
|
||
});
|
||
```
|
||
|
||
完整示例查看 [packages/samples/custom-page](https://github.com/nocobase/nocobase/tree/develop/packages/samples/custom-page) |