TypeError: No “routes” found in navigation state

问题

I am using createMaterialTopTabNavigator from react-navigation in which i have two separate screens UpdatesStack and ShopsStack and i want to navigate to other screen from these screens so i written like <Toptab navigation={this.props.navigation} /> and it showing me following red screen error.

And if i write like <Toptab /> then there is no error but i am not able to navigate.

so how can i solve this problem and able to navigate.

code

class Parenthome extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <ToolbarAndroid
          style={styles.toolbar}
          title="Toolbar"
          titleColor="#ff6600"
        />

        <Toptab navigation={this.props.navigation} />
      </View>
    );
  }
}

const UpdatesStack = createStackNavigator(
  {
    Updates: { screen: Home }
  },
  {
    initialRouteName: "Updates"
  }
);

const ShopsStack = createStackNavigator(
  {
    Shops: { screen: Conshop }
  },
  {
    initialRouteName: "Shops"
  }
);

const Toptab = createMaterialTopTabNavigator({
  Updatestab: { screen: UpdatesStack },
  Shopstab: { screen: ShopsStack }
});

export default Parenthome;

回答1:

I know it's late but just to answer for those who stumble on this from Search Engines:

1. Why don't you export default TopTab itself. There seems no need to wrap TopTab with ParentTheme component in your use case. You can style the TopTab navigator itself and render it like any other component.

2. If you must wrap the TopTab you need to have the router from the TopTab accessible, in addition to the navigation prop. This way they both refer to the same router. Simply put, add in ParentTheme:

static router = TopTab.router;

Check out Custom Navigators for more info. https://reactnavigation.org/docs/en/custom-navigators.html

回答2:

if you are using functional react components with hooks you won't be able to declare a static variable inside your components because they are not JS classes.

Instead declare the router variable as follows:

const reactComponent = (props) => { 
    /* your component logic and render here */
}
reactComponent.router = TopTab.router; //equivalent to static variable inside a class
export default reactComponent

来源：https://stackoverflow.com/questions/51675083/typeerror-no-routes-found-in-navigation-state