---
title: "React Native JSSアプリにおけるルーティングと状態管理"
slug: "routing-and-state-management-in-react-native-jss-apps"
abstract: "JSSで構築されたReact Nativeアプリがルーティングと状態管理をどのように扱うかの概要"
---
# React Native JSSアプリにおけるルーティングと状態管理

JSSで構築されたReact Nativeアプリケーションは、[接続](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/run-a-jss-for-react-native-app-in-connected-mode.html "Run a JSS for React Native app in connected mode") および [接続トンネル](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/run-a-jss-react-native-app-in-connected-tunnel-mode.html "Run a JSS React Native app in connected tunnel mode") モードでレイアウトサービスに基づく動的ルーティング、[切断](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/run-a-jss-for-react-native-app-in-disconnected-mode.html "Run a JSS for React Native app in disconnected mode") モードでローカルルートデータファイルを使用し、ルートやナビゲーションの変更によってアプリの状態変更をトリガーします。したがって、主要な実行フローの追跡はルート設定から始まります。

## クライアント側ルーティング

すべてのルートはsrc/App.jsファイル内でreact-navigation NPMパッケージを使って定義されます。例えば:

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

すべてのルートには、ルートのプロパティに提供されたデータに基づいてコンポーネントのレンダリングを処理するrender関数を持つ<Route/>コンポーネントが含まれています。

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

<Route/>コンポーネントは/src/screens/Route.jsファイル内で定義されます。クライアントでルートや画面にアクセスすると、アプリケーションは現在のルートのレイアウトサービスを取得します。アプリのルートおよび言語状態は維持されます。ルートデータはルートの残りの構造を決定し、どのコンポーネントとそのコンテンツデータが各プレースホルダーに存在するかを定義します。