Ant Design Pro 是基于 umi 和 dva 的框架,umi 已经预置了路由功能,只需要在 config/router.config.js
中添加路由信息即可。
例如,假设你需要为 HelloWorld
组件创建一个路由,你可以将以下代码添加到 config/router.config.js
中:
export default { routes: [ { path: '/', component: '../layouts/BasicLayout', routes: [ { path: '/helloworld', name: 'HelloWorld', component: './HelloWorld', }, ], }, ], }
在这个示例中,我们为 HelloWorld
组件添加了一个路由。路由的 path
是 /helloworld
,当匹配到此路径时会渲染 ./HelloWorld
组件。为了使用此路由,你需要在 BasicLayout
布局组件中添加一个链接到 /helloworld
的导航链接,例如:
<Menu.Item key="helloworld"> <Link to="/helloworld"> <Icon type="user" /> <span>HelloWorld</span> </Link> </Menu.Item>
这将创建一个菜单项,链接到 /helloworld
路径。当用户点击菜单项时,路由将匹配 ./HelloWorld
组件并显示它。
还需要注意的是,在 config/router.config.js
中还可以添加子路由和重定向路由等高级路由功能,这些功能可以根据你的具体需求进行设置。