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',
      id: 'com.myapp.test',
      // specify routes for app
      routes: [
        {
          path: '/',
          component: HomePage,
        },
        {
          path: '/about/',
          component: AboutPage,
        },
        {
          path: '/login/',
          component: LoginPage,
        },
      ],
    };
    
    export default () => (
      <App params={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>
    )
    

    Check the full Routes Documentation to know about all possible routes options, how to use Nested Routes, Routable Tabs and Routable Modals.

    Async Lazy Components

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

    {
      path: '/about/',
      async(routeTo, routeFrom, resolve, reject) {
        // 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 property of component:

    <Link onClick={() => this.$f7router.navigate('/about/')}>About</Link>
    <Link onClick={() => this.$f7router.back()}>Go Back</Link>

    Please note, that $f7route and $f7router component properties are only available inside of custom page components that you load according to routes. In parent components (like in View, or where you init your React app instance) and in child components they are not accessible. So in this case use access to initialized View Instance, e.g. $f7.views.main.router