Ant Design Pro is a framework based on umi and dva, umi has preset routing function, you only need to config/router.config.js add routing information in it.
For example, suppose you need to HelloWorld create a route for a component, you can add the following code to it config/router.config.js :
export default {
routes: [
{
path: '/',
component: '../layouts/BasicLayout',
routes: [
{
path: '/helloworld',
name: 'HelloWorld',
component: './HelloWorld',
},
],
},
],
}
In this example, we HelloWorld add a route to the component. The route path is /helloworldthat the component will be rendered when this path is matched ./HelloWorld . In order to use this route, you need to BasicLayout add a link to /helloworld the navigation link in the layout component, for example:
<Menu.Item key="helloworld">
<Link to="/helloworld">
<Icon type="user" />
<span>HelloWorld</span>
</Link>
</Menu.Item>
This will create a menu item, linked to /helloworld the path. When the user clicks on the menu item, the route will match ./HelloWorld the component and display it.
It should also be noted that config/router.config.js advanced routing functions such as sub-routing and redirection routing can also be added in , and these functions can be set according to your specific needs.