React native 反应导航+;React Native Web-在抽屉导航器中多次导航到同一屏幕不会添加到浏览器历史记录

React native 反应导航+;React Native Web-在抽屉导航器中多次导航到同一屏幕不会添加到浏览器历史记录,react-native,react-navigation,react-native-web,react-navigation-drawer,React Native,React Navigation,React Native Web,React Navigation Drawer,我正在使用React Navigation v5和React Native Web创建类似于Slack、Discord、Messages for Web等的聊天UI。我正在使用抽屉导航器和自定义抽屉内容,其中包含指向聊天屏幕的链接,并为聊天ID传递参数。使用NavigationContainer上的链接,单击每个链接将浏览器URL更改为/chat/:id。我面临的问题是,对不同聊天URL的每次导航都不会添加到浏览器历史记录中,因此,在单击第一个聊天URL之前,使用浏览器后退按钮将用户导航到其所在

我正在使用React Navigation v5和React Native Web创建类似于Slack、Discord、Messages for Web等的聊天UI。我正在使用抽屉导航器和自定义抽屉内容,其中包含指向
聊天
屏幕的链接,并为聊天ID传递参数。使用NavigationContainer上的
链接
,单击每个链接将浏览器URL更改为
/chat/:id
。我面临的问题是,对不同聊天URL的每次导航都不会添加到浏览器历史记录中,因此,在单击第一个聊天URL之前,使用浏览器后退按钮将用户导航到其所在的任何位置-他们无法使用浏览器后退按钮循环返回以前选择的聊天记录

我怀疑这与
navigation.navigate()
使用不同参数导航到同一屏幕()时如何重用现有屏幕有关。另一种选择可能是使用
导航.push()
,但我无法在抽屉上下文中实现这一点,而且在用户在不同聊天间来回导航时,我也会犹豫是否继续将新屏幕推到堆栈上

我的抽屉导航器示例:

<Drawer.Navigator 
  openByDefault
  drawerType='permanent'
  drawerContent={props => <DrawerContent {...props />}
>
  <Drawer.Screen name="Landing" component={LandingScreen} />
  <Drawer.Screen name="Chat" component={ChatScreen} />
</Drawer.Navigator>
抽屉导航器本身是堆栈导航器中的屏幕:

<Stack.Navigator>
  <Stack.Screen name="Chats" component={ChatNavigator} />
  <Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>


有人对这种方法有什么建议吗?是否有一种方法可以使用web上抽屉导航器的现有行为,同时使用不同的参数和完整的浏览器历史记录支持多次导航到同一屏幕?

找到解决方法了吗?@skbvc您的web应用程序最终如何?我也遇到了同样的问题,与.navigate()相比,我更喜欢.push()的行为,但是当我在所有屏幕重新渲染时更新上下文时,会出现性能问题。想知道你是否找到了前进的方法
<Stack.Navigator>
  <Stack.Screen name="Chats" component={ChatNavigator} />
  <Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>