ナビゲーションルーター

    Framework7-Reactには、強力で柔軟なルーターが搭載されています。そして、それを動作させるためには、Routesを指定する必要があります。

    Framework7-Reactの唯一の違いは、React.jsではすでにReactコンポーネントでアプリケーションを構成しているため、Pages(Reactコンポーネント)をルートにマッピングする必要があることです。これは、ルートの component プロパティに React コンポーネントを渡すことで実現できます。以下に基本的な例を示します。

    // App.jsx
    
    // ページコンポーネントのインポート
    import HomePage from 'home.jsx';
    import AboutPage from 'about.jsx';
    import LoginPage from 'login.jsx';
    
    /*
      Now we need to map components to routes.
      We need to pass them along with the F7 app parameters to <App> component
    */
    
    const f7params = {
      name: 'My App',
      id: 'com.myapp.test',
      // アプリのルートを指定する
      routes: [
        {
          path: '/',
          component: HomePage,
        },
        {
          path: '/about/',
          component: AboutPage,
        },
        {
          path: '/login/',
          component: LoginPage,
        },
      ],
    };
    
    export default () => (
      <App { ...f7params }>
        {/* Current View/Router, initial page will be loaded from home.jsx component */}
        <View main url="/" />
      </App>
    )
    
    // home.jsx
    export default () => (
      <Page name="home">
        <Navbar title="Home Page" />
        ...
        <Link href="/about/">About Page</Link>
        <Link href="/login/">Login Page</Link>
      </Page>
    )
    // about.jsx
    export default () => (
      <Page name="about">
        <Navbar title="About" />
        {/* Page content */}
        ...
      </Page>
    )
    // ログイン.jsx
    export default () => (
      <Page name="login">
        <Navbar title="Login" />
        {/* Page content */}
        ...
      </Page>
    )
    

    すべての可能なルートのオプションや、入れ子のルートの使い方については、入れ子のルートを参照してください。 また、入れ子のルートルーティング可能なタブルーティング可能なモーダルの使い方についても説明しています。

    コンポーネントにプロップを渡す

    ルーターで読み込んだReactコンポーネントにコンポーネントプロップを渡すことができます。これにはいくつかの方法があります。

    まず、すべてのルートパラメータは自動的にコンポーネントにプロップとして渡されます。

    // route with params
    {
      path: '/blog/:postId/comments/:commentId/',
      component: BlogPost,
    }

    つまり、/blog/45/comments/122/というURLで移動した場合、以下のデータがpropsに渡されます。

    {
      postId: '45',
      commentId: '122',
    }

    もう一つの方法は、ルートの options でpropsを指定することです。

    {
      path: '/some-page/',
      component: SomeComponent,
      options: {
        props: {
          foo: 'bar',
          bar: true,
        },
      },
    }

    最後に、APIでナビゲートする際に、ルートコンポーネントにpropsを動的に渡すこともできます。

    f7router.navigate('/some-page/', {
      props: {
        foo: 'bar',
        bar: true,
      }
    })
    

    非同期遅延コンポーネント

    Webpackでは、必要に応じてページコンポーネントをロードすることができます。例えば、F7のルートasyncComponentで可能になります。

    {
      path: '/about/',
      asyncComponent: () => import('./pages/about.jsx'),
    },

    また、もっとコントロールしたい場合は、async ルートを使用します。

    {
      path: '/about/',
      async({ resolve }) {
        // dynamic import component; returns promise
        const reactComponent = () => import('./pages/about.jsx');
        // プロミスの解決
        reactComponent().then((rc) => {
          // コンポーネントで解決
          resolve({ component: rc.default })
        });
      } ,
    },
    

    ルーターAPI

    ルーターのインスタンスにアクセスしてルーターAPIを使用するには、コンポーネントの特別なf7routerコンポーネントプロップを使用できます。

    export default ({ f7router }) => {
      return (
        <Page>
          <Link onClick={() => f7route.navigate('/about/')}>About</Link>
          <Link onClick={() => f7route.back()}>Back</Link>
        </Page>
      )
    }

    f7routef7router`のコンポーネントプロップは、ルートに応じてロードされるカスタムページコンポーネントの内部でのみ利用可能であることに注意してください。親コンポーネント(ViewやReactアプリのインスタンスを初期化する場所など)や子コンポーネントでは、これらにアクセスできません。この場合、初期化されたView Instanceへのアクセスを使用します。