fix(router): checkout 2.x router fixed

packages/taro-router/src/apis/index.ts

@@ -47,6 +47,18 @@ const addHtmlExtname = (str: string) => {
   return /\.html\b/.test(str) ? str : `${str}.html`
 }
 
+const notTabbar = (url: string) => {
+  const path = url.split('?')[0]
+  const app = Taro.getApp()
+  if (app && app.config) {
+    const config = app.config
+    if (config.tabBar && config.tabBar.list && config.tabBar.list instanceof Array) {
+      return config.tabBar.list.findIndex(e => e.pagePath === path) === -1
+    }
+  }
+  return true
+}
+
 const getTargetUrl = (url: string, customRoutes: CustomRoutes) => {
   const matched = url.match(/([\s\S]*)(\?[\s\S]*)?/) || []
   const pathname = matched[1] || ''
@@ -72,6 +84,8 @@ const createNavigateTo = (
 
     try {
       invariant(url, 'navigateTo must be called with a url')
+      invariant(notTabbar(url), 'can not navigateTo a tabbar page')
+
       if (/^(https?:)\/\//.test(url)) {
         window.location.assign(url)
       } else if (history) {
@@ -132,6 +146,7 @@ const createRedirectTo = (
 
     try {
       invariant(url, 'redirectTo must be called with a url')
+      // invariant(notTabbar(url), 'can not redirectTo a tabbar page')
 
       if (/^(https?:)\/\//.test(url)) {
         window.location.assign(url)

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

@@ -40,12 +40,19 @@ class Route extends Taro.Component<RouteProps, {}> {
   isRoute = true;
   scrollPos = 0;
 
+  state = {
+    location: {}
+  }
+
   constructor (props, context) {
     super(props, context)
     this.matched = this.computeMatch(this.props.currentLocation)
+    if (this.matched) {
+      this.state = { location: this.props.currentLocation }
+    }
   }
 
-  computeMatch (currentLocation) {
+  computeMatch (currentLocation: Location) {
     const path = currentLocation.path;
     const key = currentLocation.state.key;
     const isIndex = this.props.isIndex;
@@ -68,12 +75,22 @@ class Route extends Taro.Component<RouteProps, {}> {
 
   getRef = ref => {
     if (ref) {
+      if (ref.props.location !== this.state.location) {
+        ref.props.location = this.state.location
+      }
       this.componentRef = ref
-      this.props.collectComponent(ref, this.props.k)
+      this.props.collectComponent(ref, this.props.key)
     }
   }
 
   updateComponent (props = this.props) {
+    if (this.matched && this.componentRef) {
+      this.setState({
+        location: props.currentLocation
+      }, () => {
+        this.componentRef.props.location = this.state.location
+      })
+    }
     props.componentLoader()
       .then(({ default: component }) => {
         if (!component) {
@@ -93,7 +110,7 @@ class Route extends Taro.Component<RouteProps, {}> {
     this.updateComponent()
   }
 
-  componentWillReceiveProps (nProps, nContext) {
+  componentWillReceiveProps (nProps: RouteProps) {
     const isRedirect = nProps.isRedirect
     const lastMatched = this.matched
     const nextMatched = this.computeMatch(nProps.currentLocation)
@@ -150,12 +167,13 @@ class Route extends Taro.Component<RouteProps, {}> {
     if (!this.wrappedComponent) return null
 
     const WrappedComponent = this.wrappedComponent
+
     return (
       <div
         className="taro_page"
         ref={this.getWrapRef}
         style={{ minHeight: '100%' }}>
-        <WrappedComponent ref={this.getRef} />
+        <WrappedComponent ref={this.getRef} location={this.state.location} />
       </div>
     )
   }

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

@@ -126,19 +126,27 @@ class Router extends Taro.Component<Props, State> {
     const routeStack: Types.RouteObj[] = [...this.state.routeStack]
     const matchedRoute = this.computeMatch(toLocation)
     const index = routeStack.findIndex(e => e.path === toLocation.path)
-    if (index === -1) {
+    if (!this.isTabBar(routeStack[routeStack.length - 1].path)) {
+      routeStack.splice(-1, 1, assign({}, matchedRoute, {
+        key: toLocation.state.key,
+        isRedirect: true,
+        isTabBar
+      }))
+    } else if (index === -1) {
       routeStack.forEach(v => { v.isRedirect = false })
       routeStack.push(assign({}, matchedRoute, {
         key: toLocation.state.key,
         isRedirect: false,
         isTabBar
       }))
+    } else {
+      toLocation.state.key = routeStack[index].key || ''
     }
     this.setState({ routeStack, location: toLocation })
   }
 
-  collectComponent = (comp, k) => {
-    this.currentPages[k] = comp
+  collectComponent = (comp, index: string) => {
+    this.currentPages[Number(index) || 0] = comp
   }
 
   componentDidMount () {
@@ -152,14 +160,16 @@ class Router extends Taro.Component<Props, State> {
       toLocation,
       action
     }) => {
-      if (action === "PUSH") {
-        this.push(toLocation);
-      } else if (action === "POP") {
+      if (action === "POP") {
         this.pop(toLocation, fromLocation);
       } else if (this.isTabBar(toLocation.path)) {
         this.switch(toLocation, true);
       } else {
-        this.replace(toLocation);
+        if (action === "PUSH") {
+          this.push(toLocation);
+        } else {
+          this.replace(toLocation);
+        }
       }
 
       this.lastLocation = history.location
@@ -175,7 +185,15 @@ class Router extends Taro.Component<Props, State> {
   }
 
   componentWillUpdate (nextProps, nextState) {
-    this.currentPages.length = nextState.routeStack.length
+    if (Taro._$router) {
+      this.currentPages.length = Number(Taro._$router.state.key) + 1
+    }
+  }
+
+  componentDidShow () {
+    if (Taro._$router) {
+      this.currentPages.length = Number(Taro._$router.state.key) + 1
+    }
   }
 
   componentWillUnmount () {