* 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>
		
			
				
	
	
		
			79 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
			
		
		
	
	
			79 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
| # RouteSwitch
 | |
| 
 | |
| ## `<RouteSwitchProvider />`
 | |
| 
 | |
| ```ts
 | |
| interface RouteSwitchProviderProps {
 | |
|   components?: ReactComponent;
 | |
|   routes?: RouteRedirectProps[];
 | |
| }
 | |
| ```
 | |
| 
 | |
| ## `<RouteSwitch />`
 | |
| 
 | |
| ```ts
 | |
| 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;
 | |
| }
 | |
| ```
 | |
| 
 | |
| ## 完整示例
 | |
| 
 | |
| ```tsx | pure
 | |
| 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>
 | |
|   );
 | |
| };
 | |
| ``` |