Home / Questions / 495244
Accepted
Rafael Monroy Rodriguez
Asked: 2022-04-06 10:04:54 +0800 CST 2022-04-06 10:04:54 +0800 CST

useNavigation react error

  • 772

Hello, I am trying to use useNavigationto move between screens but I get an error in the DetailScreen, I was looking for information about it and I think it is because in version 6 of react they made a change in the use of navigation.

import { useNavigation } from '@react-navigation/core' import React from 'react' import { Button, Text, View } from 'react-native'

export const HomeScreen = () => {
    const navigation = useNavigation();
    return (
        <View>
            <Text>Home Screen</Text>

            <Button
                title="ir detalle"
                onPress={()=>navigation.navigate('DetailScreen')}
            />
        </View>
    )
}

Can someone help me by providing information about that, I was looking in the official documentation but I didn't find something clear. Thank you

reactjs

2 Answers

  1. Best Answer

    It should be something like this:

    export const HomeScreen = () => {
    const navigate = useNavigation();
    return (
        <View>
            <Text>Home Screen</Text>

            <Button
                title="ir detalle"
                onPress={()=> navigate('/DetailScreen')}
            />
        </View>
    )
}

    It is correct that in react-router v6 there were changes, for example:

    V5 useHistory() is used

    V6 useNavigate() is used

    You can see the documentations here:

    V6: https://reactrouter.com/docs/en/v6

    V5: https://v5.reactrouter.com/web/guides/quick-start

    • 1

  2. since react router v6 is like this

    import { useNavigate } from "react-router-dom";

let navigate = useNavigate()
    
navigate('/pagename')

    you can see more here react router v6

    • 0