fix(issues): 修复之前 issuse 的bug

notes/issues.md

@@ -33,6 +33,6 @@
 
 ## Todo
 
-- 需要在组件卸载时，取消请求，和其他异步任务，订阅事件
-- 监听路由变化，将滚动条重置到页面顶部
+- 需要在组件卸载时，~~取消请求~~，和其他异步任务，订阅事件
+- ~~监听路由变化，将滚动条重置到页面顶部~~
 - 404 错误页的编写

src/App.tsx

@@ -9,12 +9,24 @@ import RouterView from './router/RouterView';
 
 moment.locale('zh-cn');
 
+function routerBeforeEnterHook(path: string) {
+  // 取消所有请求
+  window.cancalXHRList.forEach((source: any) => {
+    source.cancel("cancel xhr");
+  });
+  // 滚动条复位，回到原点
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  }); 
+}
+
 class App extends Component {
   render() {
     return (
       <LocaleProvider locale={zhCN}>
         <div className="App">
-          <RouterView></RouterView>
+          <RouterView beforeEnter={routerBeforeEnterHook} />
         </div>
       </LocaleProvider>
     );

src/api/index.ts

@@ -1,53 +1,73 @@
 import axios from "axios";
 
+
+declare global {
+  interface Window {
+    cancalXHRList: any
+  }
+}
+
 const BASE_URL = "/api/movie";
 const API_KEY = "0b2bdeda43b5688921839c8ecb20399b";
 
-let instance = axios.create({
-  baseURL: BASE_URL,
-  timeout: 3e4,
-  params: {
-    "apikey": API_KEY,
-  }
-});
+
+window.cancalXHRList = [];
+
+function http() {
+  const CancelToken = axios.CancelToken;
+  const source = CancelToken.source();
+
+  window.cancalXHRList.push(source);
+
+  let instance: any = axios.create({
+    baseURL: BASE_URL,
+    timeout: 3e4,
+    params: {
+      "apikey": API_KEY,
+    },
+    cancelToken: source.token,
+  });
+
+  return instance;
+}
 
 // 热映
 export function getHotShowing(params?: any) {
-  return instance.get("/in_theaters", {
-    params
+  return http().get("/in_theaters", {
+    params,
   });
 }
 
 // top250
 export function getTop250(params?: any) {
-  return instance.get("/top250", {
+  return http().get("/top250", {
     params,
   });
 }
 
 // 新片
 export function getNew() {
-  return instance.get("/new_movies");
+  return http().get("/new_movies");
 }
 
 // 电影详情
 export function getDetail(id: string) {
-  return instance.get(`/subject/${id}`);
+  return http().get(`/subject/${id}`);
 }
 
 // 北美票房榜
 export function getGoodbox() {
-  return instance.get("/us_box");
+  return http().get("/us_box");
 }
 
 // 搜索条目
 export function getContentBySearch(str: string, params?: any) {
-  return instance.get(`/search?q=${str}`, {
+  return http().get(`/search?q=${str}`, {
     params
   });
 }
 
 // 口碑榜
 export function getWeeklyMovie() {
-  return instance.get("/weekly");
+  return http().get("/weekly");
 }

src/pages/Search.tsx

@@ -15,6 +15,7 @@ import { reSerialize } from '../utils';
 import { List, Pagination, Affix, Tag } from 'antd';
 
 import '../css/Search.css';
+import { SSL_OP_SSLREF2_REUSE_CERT_TYPE_BUG } from 'constants';
 
 class Search extends React.Component {
   constructor(props: any) {

src/react-app-env.d.ts

@@ -38,8 +38,8 @@ declare module '*.png' {
 }
 
 declare module '*.webp' {
-    const src: string;
-    export default src;
+  const src: string;
+  export default src;
 }
 
 declare module '*.svg' {

src/router/RouterView.tsx

@@ -1,24 +1,41 @@
 import React from 'react';
 import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
 
-import Home from '../pages/Home';
-import Detail from '../pages/Detail';
-import Box from '../pages/Box';
-import Search from '../pages/Search';
+import routerMap from "./config";
 
-import NotFound from '../errors/NotFound';
 
-export default function () {
+
+function CustomRoute(props: any) {
+  let path = props.location.pathname;
+
+  props.beforeEnter && props.beforeEnter(path);
+
+  // '/'-> '/home
+  if (path === '/') return <Redirect to='/home' />
+
+  // if can match
+  let matchRoute: any = routerMap.find(item => {
+    let url = item.path;
+    // /detail/:id -> \\/detail\\/[^/+]
+    url = url.replace(/(\:.+)/g, "[^/]+").replace(/\//g, "\\/");
+
+    return new RegExp(`${url}(\\/|\\/)?$`, 'gi').test(path);
+  });
+
+  if (matchRoute) {
+    return <Route exact={!matchRoute.hasChild} path={matchRoute.path} component={matchRoute.component} />
+  }
+  return <Redirect to='/404' />
+}
+
+export default function (props: any) {
   return (
     <BrowserRouter>
-      <Switch>
-        <Redirect exact from="/" to="/home" />
-        <Route exact path="/home" component={Home} />
-        <Route exact path="/detail/:id" component={Detail} />
-        <Route exact path="/box" component={Box} />
-        <Route exact path="/search" component={Search} />
-        <Route component={NotFound} />
-      </Switch>
+      <>
+        <Switch>
+          <CustomRoute {...props} />
+        </Switch>
+      </>
     </BrowserRouter>
   );
 }

src/router/config.ts

@@ -0,0 +1,30 @@
+
+import Home from '../pages/Home';
+import Detail from '../pages/Detail';
+import Box from '../pages/Box';
+import Search from '../pages/Search';
+
+import NotFound from '../errors/NotFound';
+
+export default [
+  {
+    path: '/home',
+    component: Home,
+  },
+  {
+    path: '/detail/:id',
+    component: Detail,
+  },
+  {
+    path: '/box',
+    component: Box,
+  },
+  {
+    path: '/search',
+    component: Search,
+  },
+  {
+    path: '/404',
+    component: NotFound,
+  }
+];