---
title: "Routing and state management in React Native JSS apps"
slug: "routing-and-state-management-in-react-native-jss-apps"
abstract: "Overview of how React Native apps built with JSS handle routing and state management"
---
# Routing and state management in React Native JSS apps

React Native applications built with JSS use dynamic routing based on the Layout Service in [connected](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/run-a-jss-for-react-native-app-in-connected-mode.html "Run a JSS for React Native app in connected mode") and [connected tunnel](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/run-a-jss-react-native-app-in-connected-tunnel-mode.html "Run a JSS React Native app in connected tunnel mode") modes or local route data files in [disconnected](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/run-a-jss-for-react-native-app-in-disconnected-mode.html "Run a JSS for React Native app in disconnected mode") mode, and uses route/navigation changes to trigger app state changes. Therefore, tracing the primary execution flow begins with the route configuration.

<details>
<summary><h2>Client-side routing</h2></summary>

Every route is defined in the `src/App.js` file using the `react-navigation` NPM package. For example:

```javascript
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'

const Navigator = createStackNavigator({
  Home: { screen: Home },
  Styleguide: { screen: Styleguide }
}, {
  initialRouteName: 'Home'
})

const AppNavigator = createAppContainer(Navigator)

export default AppNavigator

```

Every route includes a `<Route/>` component with a `render` function that handles the rendering of components based on data provided in the properties of the route.

```jsx
const Home = ({ navigation }) => (
  <Route
    path='/'
    render={({ data }) =>
      <Placeholder name='jss-main' rendering={data} navigation={navigation} />
    }
  />
);

```

The `<Route/>` component is defined in the `/src/screens/Route.js` file. When a route/screen is accessed in the client, the application acquires the Layout Service for the current route. The route and language state of the app is maintained. The route data determine the remaining structure of the route, defining which components and their content data live in each placeholder.

</details>