I'm building a RN App and also building it for web with RNWeb, but I'm encountering two issues.

First, I need to get rid of some of the names in the route of the url, for example:

In my App.js I have a <NavigationContainer> In which I have a StackNavigator that goes to a screen called Main. In the Main screen, I have a tab navigator with 5 different tab screens. Each of that Screen, is a different StackNavigator that holds multiple StackScreens depending on the context of the TabNavigator Screen (Ex: Settings on tab navigator will hold the StackSettings.Navigator and inside that will reside AppSettings screen component. But the problem is, they show up in the url, for example: http://app.com/StackSettings/AppSettings instead of http://app.com/AppSettings or http://app.com/StackHome/Home instead of http://app.com/Home

TLDR: I have stacked navigations inside each tab navigation and url shows like this: http://app.com/StackNavigatorName/StackScreenName instead of http://app.com/StackScreenName

And the 2nd issue I'm encountering, if I go to another Tab Navigator(therefore another StackNavigator) and go back to the old one(use back or choose it from tab nav) I cannot click on anything on it.

Code:

App.js

 <NavigationContainer linking={{
            prefixes: ["localhost"],
            config:{
              screens:{
                Main: {
                  path: '/',
                },
              },
            },
          }}
        >
        
          <Stack.Navigator initialRouteName="Main" >
            <Stack.Screen name="Main" component"Main">
          </Stack.Navigator>
</NavigationContainer>
        

Main.js

const StackNavigatorHome = () => (
    <StackHome.Navigator initialRoute="Home">
            <StackHome.Screen name="Home" component={Home}/>
            <StackHome.Screen name="Create" component={Create}/>
    </StackHome.Navigator>
)


const StackNavigatorSettings = () => (
    <StackSettings.Navigator initialRoute="Settings">
            <StackSettings.Screen name="Settings" component={Settings}/>
            <StackSettings.Screen name="AppSettings" component={AppSettings}/>
    </StackSettings.Navigator>
)

return(
<Tab.Navigator >
    <Tab.Screen name="StackHome" component={StackNavigatorHome} />
    <Tab.Screen name="StackSettings" component={StackNavigatorSettings} />
</Tab.Navigator>
)