fix(theme): validateDOMNesting errors from navbar (#390) (#391)

* fix(theme): avoid validateDOMNesting errors,fix #390 * fix(theme): modify DOM to avoid wrong nested elements * refactor(theme): correct 2-level nav active style Co-authored-by: PeachScript <[email protected]>
umijs · Nov 24, 2020 · da6b364 · da6b364
1 parent 807880a
commit da6b364
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 46 deletions.
diff --git a/packages/theme-default/src/components/Navbar.less b/packages/theme-default/src/components/Navbar.less
@@ -68,46 +68,48 @@
   }
 
   nav {
-    > a,
     > span {
       position: relative;
       margin-left: 40px;
       display: inline-block;
       height: @s-nav-height;
       cursor: pointer;
-      color: #4d5164;
       font-size: 14px;
       line-height: @s-nav-height;
       text-decoration: none;
       letter-spacing: 0;
 
-      &:hover,
-      &.active {
-        color: @c-primary;
-      }
+      > a {
+        color: #4d5164;
 
-      + *:not(a) {
-        margin-left: 40px;
-      }
+        &:hover,
+        &.active {
+          color: @c-primary;
+        }
 
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        right: -18px;
-        left: -18px;
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          right: -18px;
+          left: -18px;
+        }
+
+        &.active::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: -2px;
+          right: -2px;
+          height: 2px;
+          background-color: @c-primary;
+          border-radius: 1px;
+        }
       }
 
-      &.active::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: -2px;
-        right: -2px;
-        height: 2px;
-        background-color: @c-primary;
-        border-radius: 1px;
+      + *:not(a) {
+        margin-left: 40px;
       }
 
       // second nav

diff --git a/packages/theme-default/src/components/Navbar.tsx b/packages/theme-default/src/components/Navbar.tsx
@@ -45,14 +45,15 @@ const Navbar: FC<INavbarProps> = ({ onMobileMenuClick, navPrefix, location }) =>
             </ul>
           );
 
-          return nav.path ? (
-            <NavLink to={nav.path} key={nav.path}>
-              {nav.title}
-              {child}
-            </NavLink>
-          ) : (
-            <span key={nav.title}>
-              {nav.title}
+          return (
+            <span key={nav.title || nav.path}>
+              {nav.path ? (
+                <NavLink to={nav.path} key={nav.path}>
+                  {nav.title}
+                </NavLink>
+              ) : (
+                nav.title
+              )}
               {child}
             </span>
           );

diff --git a/packages/theme-default/src/components/SideMenu.less b/packages/theme-default/src/components/SideMenu.less
@@ -212,8 +212,8 @@
     .@{prefix}-menu-nav-list {
       padding: 16px 0;
 
-      > li > a,
-      > li > span {
+      > li,
+      > li > a {
         padding-right: 0;
         line-height: 2.4;
 

diff --git a/packages/theme-default/src/components/SideMenu.tsx b/packages/theme-default/src/components/SideMenu.tsx
@@ -75,17 +75,8 @@ const SideMenu: FC<INavbarProps> = ({ mobileMenuCollapsed, location }) => {
 
                 return (
                   <li key={nav.path || nav.title}>
-                    {nav.path ? (
-                      <NavLink to={nav.path}>
-                        {nav.title}
-                        {child}
-                      </NavLink>
-                    ) : (
-                      <span>
-                        {nav.title}
-                        {child}
-                      </span>
-                    )}
+                    {nav.path ? <NavLink to={nav.path}>{nav.title}</NavLink> : nav.title}
+                    {child}
                   </li>
                 );
               })}