a6eebb940f
* feat: improve code * feat: update docs * feat: update docs * Update index.md * Update features.md * Update when.md * Update contributing.md * Update translations.md * feat: clean up * Add files via upload * Update the-first-app.md * Update plugins.md * Update a-b-c.md * Update blocks.md * feat: update docs * Add files via upload * Update charts.md * feat: update navs * Update index.md * Update index.md * Update features.md * Update index.md * Update docker-compose.md * Update create-nocobase-app.md * Update git-clone.md * Update contributing.md * Update translations.md * Update plugins.md * Update the-first-app.md * Add files via upload * Update charts.md * Update charts.md * Update a-b-c.md * Update collections.md * Update menus.md * Update menus.md Co-authored-by: Zhou <zhou.working@gmail.com>
1.5 KiB
1.5 KiB
RouteSwitch
<RouteSwitchProvider />
interface RouteSwitchProviderProps {
components?: ReactComponent;
routes?: RouteRedirectProps[];
}
<RouteSwitch />
interface RouteSwitchProps {
routes?: RouteRedirectProps[];
components?: ReactComponent;
}
type RouteRedirectProps = RedirectProps | RouteProps;
interface RedirectProps {
type: 'redirect';
to: any;
path?: string;
exact?: boolean;
strict?: boolean;
push?: boolean;
from?: string;
[key: string]: any;
}
interface RouteProps {
type: 'route';
path?: string | string[];
exact?: boolean;
strict?: boolean;
sensitive?: boolean;
component?: any;
routes?: RouteProps[];
[key: string]: any;
}
完整示例
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>
);
};