ナビゲーションルーター

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>
  )
}