React-navigation change url but not view

Question

I am using React Native for Web and implemented navigation in my app but I am not able to navigate next - previous with browser button,

The URL is changed in the address bar of the browser but not able to change the view.

I have used React-Navigation for both Web/Mobile, Anyone knows a better approach please guide me

//App.js 
import * as React from 'react';
import { View, Text,Button,Platform } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {

return (

    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <View style={{ marginVertical: 20 }}>
      <Text style={{fontWeight:'100',fontSize:30}}>Home Screen</Text>
      </View>
      
      
      <Button
        title="Go to Details Screen"
        onPress={() => navigation.navigate('Details')}
      />

      <View style={ {marginVertical:20}}>
        <Button  title="Go to Setting Screen" onPress={() => navigation.navigate('Setting')} />
      </View>
    </View>
  );
}


const Stack = createStackNavigator();

function App() {

  const linking = {
    prefixes: ['myurlhere://'],
    config: {

      screens: {
        Setting: 'Setting',
        Details: 'Details',
      },
    },
  };


  return (
    <NavigationContainer linking={linking} >
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: !isWeb, headerLeft:()=> null }} />
        <Stack.Screen name="Setting" component={Setting} options={{headerShown:!isWeb}}/>
        <Stack.Screen name="Details" component={Details} options={{headerShown:!isWeb}}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

 [![//Setting Screen
    function Setting() {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text style={{fontWeight:'100',fontSize:30}}>Setting Screen</Text>
        </View>
      );
    }
    //Details Screen
    function Details() {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Text style={{fontWeight:'100',fontSize:30}}>Detail's Screen</Text>
        </View>
      );
    }]
export default App;

Answer 1

I am also looking into it.

But here is where I am at and its working.

    const linking = {
      prefixes: ['http://localhost:19006/', 'mychat://'],
      config: {
        screens: {
          Home: '',
          Search: '?:id/Search',
        }
      },
    };

  return (

      <AppContext.Provider value={userSettings}>
            <NavigationContainer linking={linking}>
              <StackContainer />
            </NavigationContainer>
      </AppContext.Provider>
  );