Navigation Router

    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 property of the route. Here’s a basic example:

    1. // home.jsx
    2. export default () => (
    3.   <Page name="home">
    4.     <Navbar title="Home Page" />
    5.     ...
    6.     <Link href="/about/">About Page</Link>
    7.     <Link href="/login/">Login Page</Link>
    8.   </Page>
    9. )
    1. // about.jsx
    2. export default () => (
    3.   <Page name="about">
    4.     {/* Page content */}
    5.     ...
    7. )

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

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

    1. // route with params
    2. {
    3.   path: '/blog/:postId/comments/:commentId/',
    4.   component: BlogPost,
    5. }

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

    1. {
    2.   postId: '45',
    3.   commentId: '122',
    4. }

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

    1. this.$f7router.navigate('/some-page/', {
    2.   props: {
    4.   }
    5. })

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

    1. {
    2.   path: '/about/',
    3.   async(routeTo, routeFrom, resolve, reject) {
    4.     // dynamic import component; returns promise
    5.     const reactComponent = () => import('./pages/about.jsx');
    6.     // resolve promise
    7.     reactComponent().then((rc) => {
    8.       // resolve with component
    9.       resolve({ component: rc.default })
    10.     });
    11.   } ,
    12. },

    Please note, that $f7route and 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