useRoute

useRoute 是一个钩子，可以访问 route 对象。当你无法将 route 对象从 props 传递到组件，或者不想在子组件嵌套较深的情况下传递它时，它很有用。

¥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() 返回其内部屏幕的 route 对象。

¥useRoute() returns the route object of the screen it's inside.

示例

¥Example

Static

import { useRoute } from '@react-navigation/native';

function MyText() {
  const route = useRoute();

  return <Text>{route.params.caption}</Text>;
}

Try on Snack

Dynamic

import { useRoute } from '@react-navigation/native';

function MyText() {
  const route = useRoute();

  return <Text>{route.params.caption}</Text>;
}

Try on Snack

检查如何使用 TypeScript 此处 设置 useRoute。

¥Check how to setup useRoute with TypeScript here.

有关详细信息，请参阅 route 对象 的文档。

¥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} />;
}