Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ant design pro v6中,如何实现路由的嵌套、自定义布局呢 #11061

Closed
wuchencm opened this issue Nov 27, 2023 · 1 comment
Closed

Comments

@wuchencm
Copy link

wuchencm commented Nov 27, 2023

我想实现如下功能:
image

image

这种是不是用到了自定义布局跟嵌套路由? 请教下这种情况下的解决思路

@chenshuai2144
Copy link
Collaborator

在 Ant Design Pro V6 中实现路由的嵌套和自定义布局,可以通过使用 ProLayout 组件来实现。首先,你需要在路由配置中为每个路由设置一个 name 字段,用于菜单的渲染。然后,在 src/layouts/index.tsx 文件中,使用 ProLayout 组件作为布局的容器,并根据需要进行配置。在 ProLayout 的配置中,你可以使用 route 属性传入客户端路由表中的第一个路由对象,使用 location 属性传入当前的路由信息。接下来,你可以使用 menuItemRender 属性来自定义菜单的渲染逻辑,例如添加链接或自定义样式。最后,使用 Outlet 组件来渲染子路由的内容。这样,你就可以实现路由的嵌套和自定义布局了。具体的代码示例和效果可以参考上面的代码和截图。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants