React Navigation 中的 navigation.navigate() 和 <Link /> 有什么区别？

Question

我也在我的项目中使用react-native-web。 navigation.navigate 似乎在网络上运行良好。为什么我需要或者在什么情况下我应该使用？

Answer 1

navigation.navigate() 和 都用于 React 应用程序中的导航，但它们用于不同的上下文和不同的库。

React 导航（React Native）中的

navigation.navigate()： 在使用 React Navigation 的 React Native 应用程序中，navigation.navigate() 函数用于以编程方式在应用程序内的不同屏幕之间导航。

示例：

import { useNavigation } from '@react-navigation/native';
const MyComponent = () => {
const navigation = useNavigation();

const goToDetailsScreen = () => {
    navigation.navigate('Details');
};

return (
    <Button title="Go to Details" onPress={goToDetailsScreen} />
  );
};

.

在 React Router（React for Web）中： 在使用 React Router 的 Web 应用程序中，该组件用于创建链接，允许用户在 Web 应用程序中的不同路由之间导航。它生成一个锚 () 标记，单击该标记时，会触发导航到指定的路线，而无需重新加载整个页面。

import { Link } from 'react-router-dom';

const MyComponent = () => {
return (
   <Link to="/details">Go to Details</Link>
  );
};