feats

src/components/page/index.jsx

-import React from 'react';
+import React, { useEffect } from 'react';
 // import { PageHeader } from 'antd';
-// import useRoute from '@/routes/useRoute';
+import { useModel } from '@/store';
 import Container from './Container';
 
 export default (props) => {
   // const { children, ...headerProps } = props;
-
-  // const currentRoute = useRoute() || {};
-  // const { title } = currentRoute.meta || {};
-
+  
   return (
     <Container>
       {props.children}

src/layouts/AuthLayout/components/Header/Title.jsx

 import { Typography } from 'antd';
-import { useModel } from '@/store';
+import useRoute from '@/utils/hooks/useRoute';
 
 const { Title } = Typography;
 
 }
 
 export default (props) => {
-  const { title } = useModel('system');
+  const route = useRoute();
+  const { title } = route && route.meta || {}
 
   return (
     <Title level={5} style={titleStyle}>
-      <span style={spanStyle}>&raquo;</span>
-      <span>{title}</span>    
+      { title && <span style={spanStyle}>&raquo;</span> }
+      { title && <span>{title}</span> }
     </Title>
   );
 }

src/layouts/AuthLayout/components/HtmlTitle.jsx

 
 import { Helmet } from "react-helmet";
 import { useModel } from '@/store';
+import useRoute from '@/utils/hooks/useRoute';
 
 export default (props) => {
   const { app } = useModel('system');
-  const { title } = useModel('route');
+  const route = useRoute();
+  const { title } = route && route.meta || {}
   
   const titleTemplate = `%s - ${app.fullName}`;
   const defaultTitle = app.fullName;

src/layouts/AuthLayout/index.jsx

 
 export default (props) => {
   const { theme } = useModel('system');
-  const { setLocation } = useModel('route');
   const { user, getCurrent } = useModel('user');
 
   // const isReady = useReady(user)
     }
   }, []);
 
-  useEffect(() => setLocation(location), [location]);
-
   return (
     <Spin spinning={!user} size="large">
       <HtmlTitle />

src/pages/sample/table/index.jsx

 import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
 import { ProTable, TableDropdown } from '@ant-design/pro-components';
 import { Button, Dropdown, Menu, Space, Tag } from 'antd';
-import { useRef } from 'react';
+import { useRef, useEffect } from 'react';
 import Page from '@/components/page';
+import { useModel } from '@/store';
 
 // import request from 'umi-request';
 const columns = [
         },
     ]}/>);
 export default () => {
+
     const actionRef = useRef();
     return (<Page><ProTable columns={columns} actionRef={actionRef} cardBordered request={async (params = {}, sort, filter) => {
             console.log(sort, filter);

src/store/index.js

 import { createStore } from "@zjxpcyc/react-tiny-store";
 import useSystem from "./models/system";
-import useRoute from "./models/route";
 import useUser from "./models/user";
 
 const store = createStore({
   system: useSystem,
-  route: useRoute,
   user: useUser,
 });
 

src/store/models/route.js

-import { useState, useRef, useEffect } from "react";
-import { getRouteArr } from '@/routes/menus';
-
-export default function useRoute() {
-  const routesRef = useRef();
-  const [location, setLocation] = useState({});
-  const [route, setRoute] = useState();
-  const [title, setTitle] = useState();
-
-  const { pathname, search } = location;
-
-  // 监控 route 改变
-  useEffect(() => {
-    // 获取当前路由
-    if (!routesRef.current || !routesRef.current.length) {
-      routesRef.current = getRouteArr();
-    }
-    const current = (routesRef.current || []).filter(x => x.path === pathname)[0];
-    setRoute(current);
-
-    //
-    const { title } = current && current.meta || {}
-    setTitle(title);
-  }, [pathname, search]);
-
-  return {
-    route,
-    title,
-    setLocation,
-  }
-}

src/utils/hooks/useTitle.jsx

-
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { useModel } from '@/store';
-import useRoute from './useRoute';
-
-export default function useTitle(newTitle) {
-  
-  const { app, title, setTitle} = useModel('system');
-  const currentRoute = useRoute();
-
-  const { pathname, search } = useLocation();
-  const titleTemplate = `%s - ${app.fullName}`
-  const pageTitle = currentRoute && currentRoute.meta ? currentRoute.meta.title : undefined;
-
-  // route change, reset title
-  useEffect(() => {
-    setTitle();
-  }, [pathname, search]);
-  
-  useEffect(() => {
-    setTitle(newTitle || pageTitle);
-  }, [newTitle, pageTitle]);
-
-  return [title, titleTemplate, app.fullName];
-}