useLinkTo
Note: This API is experimental and might change in a minor version.
The useLinkTo
hook let's us navigate to a screen using a path instead of a screen name based on the linking
options. It returns a function that receives the path to navigate to.
import { useLinkTo } from '@react-navigation/native';
// ...
function Home() { const linkTo = useLinkTo();
return ( <Button onPress={() => linkTo('/profile/jane')}> Go to Jane's profile </Button> );}
This is a low-level hook used to build more complex behavior on top. We recommended to use the useLinkProps
hook to build your custom link components instead of using this hook directly. It will ensure that your component is properly accessible on the web.
Using with class component
You can wrap your class component in a function component to use the hook:
class Home extends React.Component { render() { // Get it from props const { linkTo } = this.props; }}
// Wrap and exportexport default function (props) { const linkTo = useLinkTo();
return <Profile {...props} linkTo={linkTo} />;}