https://reactnavigation.org/assets/js/841d0662.faa3ee1a.js

1"use strict";(self.webpackChunkreact_navigation_website=self.webpackChunkreact_navigation_website||[]).push([["15959"],{93623(e,t,n){n.r(t),n.d(t,{metadata:()=>a,default:()=>u,frontMatter:()=>c,contentTitle:()=>s,toc:()=>d,assets:()=>l});var a=JSON.parse('{"id":"route-object","title":"Route object reference","description":"Each screen component in your app is provided with the route object as a prop automatically. The prop contains information about the current route.","source":"@site/versioned_docs/version-8.x/route-object.md","sourceDirName":".","slug":"/route-object","permalink":"/docs/8.x/route-object","draft":false,"unlisted":false,"editUrl":"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-8.x/route-object.md","tags":[],"version":"8.x","frontMatter":{"id":"route-object","title":"Route object reference","sidebar_label":"Route object"},"sidebar":"docs","previous":{"title":"Options for screens","permalink":"/docs/8.x/screen-options"},"next":{"title":"Navigation object","permalink":"/docs/8.x/navigation-object"}}'),o=n(74848),r=n(28453);n(50773);var i=n(57250);let c={id:"route-object",title:"Route object reference",sidebar_label:"Route object"},s,l={},d=[];function p(e){let t={code:"code",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.R)(),...e.components},{ConfigTabs:n}=t;return n||function(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("ConfigTabs",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["Each ",(0,o.jsx)(t.code,{children:"screen"})," component in your app is provided with the ",(0,o.jsx)(t.code,{children:"route"})," object as a prop automatically. The prop contains information about the current route."]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"route"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"key"})," - Unique key of the screen. Created automatically or added while navigating to this screen."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"name"})," - Name of the screen. Defined in navigator component hierarchy."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"path"})," - An optional string containing the path that opened the screen. It exists when the screen was opened via a deep link."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"params"})," - An optional object containing params defined while navigating, e.g. ",(0,o.jsx)(t.code,{children:"navigate('Twitter', { user: 'Jane Doe' })"}),"."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(n,{children:[(0,o.jsx)(i.A,{value:"static",children:(0,o.jsx)(t.pre,{"data-name":"Route prop","data-snack":"true",children:(0,o.jsx)(t.code,{className:"language-js",metastring:'name="Route prop" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\n\nconst Stack = createNativeStackNavigator({\n  screens: {\n    Profile: {\n      screen: ProfileScreen,\n      initialParams: { user: 'Jane Doe' },\n    },\n  },\n});\n\n// codeblock-focus-start\nfunction ProfileScreen({ route }) {\n  return (\n    <View>\n      <Text>This is the profile screen of the app</Text>\n      <Text>{route.name}</Text>\n      <Text>{route.path ?? 'No path'}</Text>\n      <Text>{route.params?.user ?? 'No params'}</Text>\n    </View>\n  );\n}\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(Stack);\n\nexport default function App() {\n  return <Navigation />;\n}\n"})})}),(0,o.jsx)(i.A,{value:"dynamic",children:(0,o.jsx)(t.pre,{"data-name":"Route prop","data-snack":"true",children:(0,o.jsx)(t.code,{className:"language-js",metastring:'name="Route prop" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\n\nconst Stack = createNativeStackNavigator();\n\n// codeblock-focus-start\nfunction ProfileScreen({ route }) {\n  return (\n    <View>\n      <Text>This is the profile screen of the app</Text>\n      <Text>{route.name}</Text>\n      <Text>{route.path ?? 'No path'}</Text>\n      <Text>{route.params?.user ?? 'No params'}</Text>\n    </View>\n  );\n}\n// codeblock-focus-end\n\nexport default function App() {\n  return (\n    <NavigationContainer>\n      <Stack.Navigator>\n        <Stack.Screen\n          name=\"Profile\"\n          component={ProfileScreen}\n          initialParams={{ user: 'Jane Doe' }}\n        />\n      </Stack.Navigator>\n    </NavigationContainer>\n  );\n}\n"})})})]})]})}function u(e={}){let{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}}}]);