방법 1.

1. <a href="details.html">move</a>
2. const move = () => window.loaction.href="details.html"

방법 2. ⭐️ 자체 props으로 전달되는 navigation

function DetailsScreen({navigation}) {
	// ...
      <Button 
				title="Go to Details... again"
        onPress={() => navigation.push("Details")}
      />
			<Button 
				title="Go to Home" 
				onPress={() => navigation.navigate('Home')} />
      <Button 
				title="Go back" 
				onPress={() => navigation.goBack()} />
			<Button
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
	// ...
}

• push는 계속 stack을 쌓아 갈 수 있다
• navigate는 stack을 초기화하여 이동한다.

⚡ TypeScript에서 타입 명시법

import { StackNavigationProp } from '@react-navigation/stack';
interface Props {
    navigation: StackNavigationProp<RootStackParamList, 'Profile'>;
}
const DetailsScreen = ({ navigation }: Props) => {
	//	...
}

실행은 잘 되는데 왜 에러가 자꾸 검출 될까?? 😢

해결!

navigation에 관한 페이지 list 인터페이스를 만들어야한다.

type RootStackParamList = {
    HomeScreen: undefined;
    DetailsScreen : undefined;
};
interface Props {
    navigation: StackNavigationProp<RootStackParamList, 'HomeScreen'>;
}

이렇게 인터페이스를 작성해놓고 코딩하니 깔끔하게 자동완성되고 편안하드라 ㅎㅎ

방법 3. 💫 useNavigation

import { useNavigation } from '@react-navigation/native';
function DetailsScreen() {
	const navigation = useNavigation();
	//...
	onPress={() => { navigation.navigate("Home");}}
}