@lxzy/code-snippet 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lxzy/code-snippet",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "files": [
     "*",
     "!dist",

package/routes/menu.ts

@@ -5,6 +5,12 @@ export default [
     component: 'home',
     icon: 'smile',
   },
+  {
+    path: '/login',
+    name: '登录',
+    component: 'login',
+    layout: false,
+  },
   {
     path: '/activityCenter',
     name: '活动中心',

package/src/App.tsx

@@ -1,5 +1,5 @@
 import React, { Suspense, lazy } from 'react';
-import { Switch, Route, Redirect } from 'react-router-dom';
+import { Switch, Route, Redirect, useHistory, useLocation } from 'react-router-dom';
 import { Router } from 'react-router-dom';
 import history from '@/umi';
 import BasicLayout from '@/layouts/index';
@@ -21,6 +21,28 @@ const loadComponent = (path) => {
   return componentCache[path];
 };
 
+const parseQuery = (search) => {
+  if (!search) return {};
+  const params = new URLSearchParams(search);
+  const query = {};
+  for (const [key, value] of params) {
+    query[key] = value;
+  }
+  return query;
+};
+
+const RouteWrapper = ({ componentPath }) => {
+  const routeHistory = useHistory();
+  const routeLocation = useLocation();
+  const Component = loadComponent(componentPath);
+  return (
+    <Component
+      history={routeHistory}
+      location={{ ...routeLocation, query: parseQuery(routeLocation.search) }}
+    />
+  );
+};
+
 const App = () => {
   return (
     <Router history={history}>
@@ -37,10 +59,7 @@ const App = () => {
                   key={route.path || i}
                   path={route.path}
                   exact={route.path !== '/404'}
-                  render={() => {
-                    const Component = loadComponent(route.component);
-                    return <Component />;
-                  }}
+                  render={() => <RouteWrapper componentPath={route.component} />}
                 />
               ),
             )}

package/src/layouts/index.tsx

@@ -1,9 +1,8 @@
-import React, { useState, useEffect } from 'react';
-import { Avatar, Dropdown, Menu, Space } from 'antd';
 import ProLayout from '@ant-design/pro-layout';
 import history from '@/umi';
 import menuRoutes from '../../routes/menu';
 import getIcon from '@/utils/getIcon';
+import { useLocation } from 'react-router-dom';
 
 const menuDataRender = (menuList) => {
   return menuList.map((item) => {
@@ -18,18 +17,28 @@ const menuDataRender = (menuList) => {
 
 const BasicLayout = (props) => {
   const { children } = props;
-  const [location, setLocation] = useState(history.location);
+  const location = useLocation();
 
-  useEffect(() => {
-    const unlisten = history.listen((location) => {
-      setLocation(location);
-    });
-    return () => unlisten();
-  }, []);
+  const isLayoutFalse = (routes, pathname) => {
+    for (const route of routes) {
+      if (pathname === route.path || pathname.startsWith(route.path + '/')) {
+        if (route.layout === false) return true;
+      }
+      if (route.routes) {
+        if (isLayoutFalse(route.routes, pathname)) return true;
+      }
+    }
+    return false;
+  };
+
+  if (isLayoutFalse(menuRoutes, location.pathname)) {
+    return <>{children}</>;
+  }
 
   return (
     <ProLayout
       title="管理平台"
+      // pure
       logo={false}
       layout="mix"
       fixSiderbar={false}

package/src/pages/home.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 
-export default function Home() {
+export default function Home(props) {
+  console.log(props);
+  const { history, location } = props;
   return <div>home</div>;
 }

package/src/pages/login.tsx

@@ -0,0 +1,5 @@
+import React, { useState } from 'react';
+
+export default function Login() {
+  return <div>login</div>;
+}