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 to know about all possible routes options, how to use Nested Routes, and Routable Modals.

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

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

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

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

    To access router instance and use you can use special $f7router property of component:

    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