fix: custom-routes for path-match fix #6388 (#6421)

Co-authored-by: Li,Weitao <weitaozsh@gmail.com>

packages/taro-router/src/router/route.tsx

@@ -1,14 +1,18 @@
 import Taro from '@tarojs/taro-h5'
 import Nerv, { nextTick } from 'nervjs'
+import toPairs from 'lodash/toPairs'
 
 import { tryToCall } from '../utils'
 import { Location, RouteObj } from '../utils/types'
 import createWrappedComponent from './createWrappedComponent'
 
+import * as Types from '../utils/types'
+
 type RouteProps = RouteObj & {
   currentLocation: Location;
   k: number;
   collectComponent: Function;
+  customRoutes: Types.CustomRoutes;
 }
 
 const getScroller = () => {
@@ -32,40 +36,52 @@ const getScroller = () => {
 }
 let scroller
 
+type OriginalRoute = string;
+type MappedRoute = string;
+
 class Route extends Taro.Component<RouteProps, {}> {
   matched = false;
   wrappedComponent;
   componentRef;
   containerRef;
   isRoute = true;
   scrollPos = 0;
+  customRoutes: [OriginalRoute, MappedRoute][] = [];
 
   state = {
     location: {}
   }
 
   constructor (props, context) {
     super(props, context)
+    this.customRoutes = toPairs(this.props.customRoutes)
     this.matched = this.computeMatch(this.props.currentLocation)
     if (this.matched) {
       this.state = { location: this.props.currentLocation }
     }
   }
 
   computeMatch (currentLocation: Location) {
-    const path = currentLocation.path;
+    let pathname = currentLocation.path;
     const key = currentLocation.state.key;
     const isIndex = this.props.isIndex;
     const isTabBar = this.props.isTabBar;
 
+    const foundRoute = this.customRoutes.filter(([originalRoute, mappedRoute]) => {
+      return currentLocation.path === mappedRoute
+    })
+    if (foundRoute.length) {
+      pathname = foundRoute[0][0]
+    }
+
     if (key !== undefined) {
       if (isTabBar) {
-        return key === this.props.key && path === this.props.path
+        return key === this.props.key && pathname === this.props.path
       } else {
         return key === this.props.key
       }
     } else {
-      return isIndex && path === '/'
+      return isIndex && pathname === '/'
     }
   }
 

packages/taro-router/src/router/router.tsx

@@ -72,10 +72,17 @@ class Router extends Taro.Component<Props, State> {
     }
   }
 
-  isTabBar (path: string) {
+  isTabBar (originalPathname: string) {
+    let pathname = originalPathname
+    const foundRoute = this.customRoutes.filter(([originalRoute, mappedRoute]) => {
+      return originalPathname === mappedRoute
+    })
+    if (foundRoute.length) {
+      pathname = foundRoute[0][0]
+    }
     const tabBar = this.props.tabBar
-    if (path && tabBar && tabBar.list && tabBar.list instanceof Array) {
-      return tabBar.list.findIndex(e => e.pagePath === path) !== -1
+    if (foundRoute && tabBar && tabBar.list && tabBar.list instanceof Array) {
+      return tabBar.list.findIndex(e => e.pagePath === pathname) !== -1
     }
     return false
   }
@@ -125,7 +132,9 @@ class Router extends Taro.Component<Props, State> {
   switch (toLocation: Types.Location, isTabBar = false) {
     const routeStack: Types.RouteObj[] = [...this.state.routeStack]
     const matchedRoute = this.computeMatch(toLocation)
-    const index = routeStack.findIndex(e => e.path === toLocation.path)
+    const index = routeStack.findIndex(e => e.path === toLocation.path || this.customRoutes.findIndex(([originalRoute, mappedRoute]) => {
+      return mappedRoute === toLocation.path && e.path === originalRoute
+    }) !== -1)
     if (!this.isTabBar(routeStack[routeStack.length - 1].path)) {
       routeStack.splice(-1, 1, assign({}, matchedRoute, {
         key: toLocation.state.key,
@@ -212,6 +221,7 @@ class Router extends Taro.Component<Props, State> {
           return (
             <Route
               path={path}
+              customRoutes={this.props.customRoutes}
               currentLocation={currentLocation}
               componentLoader={componentLoader}
               isIndex={isIndex}