Navigation Router

Framework7-React as Framework7 itself comes with powerful and flexible router. And to make it work we must specify Routes.

The only difference in Framework7-React is that in React.js we are already composing our application with React components, so we need to map our Pages (React components) to the routes. It can be done by passing React component in component property of the route. Here's a basic example:

// App.jsx

// Import pages components
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',
  // specify routes for app
  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>
)

// login.jsx
export default () => (
  <Page name="login">
    <Navbar title="Login" />
    {/* Page content */}
    ...
  </Page>
)

Pass Props To Components

It is possible to pass component props to React components loaded by router. There are few ways to do it.

First of all, all route params will be automatically passed as props to component, e.g.

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

So if we navigate by /blog/45/comments/122/ URL, then the following data will be passed to props:

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

Another option is to specify props in route's options:

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

And finally, props can be passed dynamically to route component when we navigate with API:

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

Async Lazy Components

With Webpack it is possible to load page components on demand, it is possible with F7's route asyncComponent, for example:

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

Or with async route if we need more control over it:

{
  path: '/about/',
  async({ resolve }) {
    // dynamic import component; returns promise
    const reactComponent = () => import('./pages/about.jsx');
    // resolve promise
    reactComponent().then((rc) => {
      // resolve with component
      resolve({ component: rc.default })
    });
  } ,
},

Router API

To access router instance and use Router API you can use special f7router component prop of component:

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