Базовая страница

Page.jsx

import { Navbar, Page } from 'framework7-react'
import React from 'react'

export const NewPage = ({ f7router }) => {

  return (

    <Page name='new-page'>

      <Navbar title='Страница' />

    </Page>

  )

}

export default NewPage

Сложная страница

Page2.jsx

import { Navbar, Page } from 'framework7-react'
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'

export const NewPage = ({ f7router }) => {

  const dispatch = useDispatch()

  const allItems = useSelector(state => state.items)

  const [items, setItems] = useState([])

  const testFunc = () => {


  }

  useEffect(() => {


  }, [])

  return (

    <Page name='new-page'>

      <Navbar title='Страница' />

    </Page>

  )

}

export default NewPage

Страница с табами

Page.js

import { Link, Navbar, Page, Tab, Tabs, Toolbar } from 'framework7-react'
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'

export const NewPage = ({ f7router }) => {

  const dispatch = useDispatch()

  const allItems = useSelector(state => state.items)

  const [items, setItems] = useState([])

  const testFunc = (done) => {


  }

  useEffect(() => {


  }, [])

  return (

    <Page name='new-page'>

      <Navbar title='Страница' />

      <Toolbar tabbar position='top'>

        <Link tabLink="#tab1" tabLinkActive >Tab 1</Link>

        <Link tabLink="#tab2" >Tab 2</Link>

      </Toolbar>

      <Tabs>

        <Tab id="tab1" tabActive>

          {/* content */}

        </Tab>

        <Tab id="tab2" >

          {/* content */}

        </Tab>

      </Tabs>

    </Page>

  )

}

export default NewPage