Navigate between different pages in router flux

[saphir100]

hi every one. I put the inside the App.js file of my drawer program and tab inside a router as follows.

<Router>
    <Scene>
        <Drawer>
            <Scene>
             <Scene/>
        <Drawer/>
        <Tabs>
             <Scene>
             <Scene/>

             <Scene>
             <Scene/>

             <Scene>
             <Scene/>

             <Scene>
            <Scene/>
        <Tabs/>
     <Scene/>
<Router/>

Based on this code we get the following ui Which has a lower Tab and a Drawer that is code inside App.js. Now inside one of these lower items we created a new Router and left the pages for it so that we could create a stack in this Router but also. For example, one of the lower Tab items in App.js is Profiles. (Profile.js) We coded it inside the profile like that.

export default  ProfileNavigator = () => (
    <Router>
        <Stack key="root">
                    <Scene key="home1" component={Home} direction={'vertical'} hideNavBar/>
            <Scene key="register" component={Heroes} direction={'vertical'} title="Register" />
        </Stack>
    </Router>
);

The problem now is that when we enter the profile page according to this image. Drawer and other TAB items no longer work, Now my question is, what can I do to fix this problem? Thanks. Of course, the structure of said files is as follows.

[MohammadAzimi]

<Router> is the problem

• I think you should only use only one <Router>

• You can have <Stack> , group <Scene> and every other tags inside the <Router> and its children (again no need for a new <Router>)

• After this, I think when you have a drawer in your routes, you should put all the other <Scene>s inside <Drawer>

Maybe like this

<Router>
    <Scene>
        <Drawer>
            <Scene>
            <Scene/>

             <Tabs>
                 <Scene key="profileNavigator">
                    <Scene key="home1" component={Home} direction={'vertical'} hideNavBar/>
                    <Scene key="register" component={Heroes} direction={'vertical'} title="Register" />
                 <Scene/>

                 <Scene>
                 <Scene/>

                 <Scene>
                 <Scene/>

                 <Scene>
                <Scene/>
            <Tabs/>
        <Drawer/>

     <Scene/>
<Router/>