useRoute
useRoute
is a hook which gives access to route
object. It's useful when you cannot pass down the route
object from props to the component, or don't want to pass it in case of a deeply nested child.
useRoute()
returns the route
object of the screen it's inside.
Example
- Static
- Dynamic
import { useRoute } from '@react-navigation/native';
function MyText() {
const route = useRoute();
return <Text>{route.params.caption}</Text>;
}
import { useRoute } from '@react-navigation/native';
function MyText() {
const route = useRoute();
return <Text>{route.params.caption}</Text>;
}
See the documentation for the route
object for more info.
Using with class component
You can wrap your class component in a function component to use the hook:
class MyText extends React.Component {
render() {
// Get it from props
const { route } = this.props;
}
}
// Wrap and export
export default function (props) {
const route = useRoute();
return <MyText {...props} route={route} />;
}