title: Nested navigators inside a custom navigator? Resulting in multiple routers
body: <p>I have a nested PageWithStackNavigator here, inside this code from the React Navigation example for a custom tab view:</p>
  
  <pre><code>const CustomTabView = ({ descriptors, navigation }) =&gt; {
    const { routes, index } = navigation.state;
    const descriptor = descriptors[routes[index].key];
    const ActiveScreen = descriptor.getComponent();
  
    return (
      &lt;SafeAreaView&gt;
        &lt;CustomTabBar navigation={navigation} /&gt;
        &lt;ActiveScreen navigation={descriptor.navigation} /&gt;
      &lt;/SafeAreaView&gt;
    );;
  };
  
  
  const CustomTabRouter = TabRouter(
    {
      PageWithStackNavigator,
      PageTwo,
    },
    {
      initialRouteName: 'PageWithStackNavigator',
    }
  );
  
  const navigator = createNavigator(CustomTabView, CustomTabRouter, {})
  const CustomTabs = createNavigationContainer(navigator);
  </code></pre>
  
  <p>But, this is resulting in multiple routers. CustomTabRouter seen here, and one router in PageWithStackNavigator. "this.props.navigation.goBack()" is doing different things depending on if I call it inside the tabs, or inside PageWithStackNavigator.</p>
  
  <p>Per <a href="https://reactnavigation.org/docs/en/common-mistakes.html#explicitly-rendering-more-than-one-navigator" rel="nofollow noreferrer">the docs</a>, I should be doing something like "static router = AuthenticationNavigator.router;", but I don't see how to do this with a custom TabRouter.</p>