From 65c25e85ce703ad6891e2840d2043ed863344ebc Mon Sep 17 00:00:00 2001
From: powerfulyang <i@powerfulyang.com>
Date: Tue, 6 Dec 2022 15:23:13 +0800
Subject: [PATCH] docs: update customization layout solutions

---
 docs/docs/layout.en-US.md | 11 ++++++++---
 docs/docs/layout.zh-CN.md | 10 ++++++++--
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/docs/docs/layout.en-US.md b/docs/docs/layout.en-US.md
index 1faf3e8b5..698bfacf8 100644
--- a/docs/docs/layout.en-US.md
+++ b/docs/docs/layout.en-US.md
@@ -328,13 +328,18 @@ Tips: When the layout mode is `mix`，click the first menu, page cannot route th
 
 Sometimes we don't want to use the built-in layout and want to do more customization. We also provide flexible customization solutions.
 
-The layout is essentially a special component, and the child pages will be passed to the layout component as attributes. The easyst layout is this:
+The layout is essentially a special component, and the child pages will be passed to the layout component as attributes. The easiest layout is this:
 
 ```tsx | pure
-// Children must be rendered, otherwise the child routes cannot be displayed
-// Here you can also set global provision
+// if you use umi@3, you can use the following code
+// Detail: https://v3.umijs.org/docs/routing#routes
 const layout = ({ children }) => children;
 export default layout;
+
+// if you use umi@4, you should use the following code
+// Detail: https://umijs.org/docs/guides/routes#routes
+const Layout = () => <Outlet />;
+export default Layout;
 ```
 
 We create a new BaseLayout.tsx in `src/layouts/`, copy the above code, and add the following code in `config/config.ts`:
diff --git a/docs/docs/layout.zh-CN.md b/docs/docs/layout.zh-CN.md
index 5c83eb675..4358b22cb 100644
--- a/docs/docs/layout.zh-CN.md
+++ b/docs/docs/layout.zh-CN.md
@@ -229,8 +229,14 @@ export default [
   },
 ];
 
-// src/layout/index.tsx
-const Layout = ({ children }) => children;
+// 如果使用的是 umi@3 src/layout/index.tsx 应该是这样的
+// 具体的实现可以参考：https://v3.umijs.org/zh-CN/docs/routing#routes
+const layout = ({ children }) => children;
+export default layout;
+
+// 如果使用的是 umi@4 src/layout/index.tsx 应该是这样的
+// 具体的实现可以参考：https://umijs.org/docs/guides/routes#routes
+const Layout = () => <Outlet />;
 export default Layout;
 ```