Problem with routing

Questions
1

I’m playing a bit with framework7. I want to create a couple of pages and router logic. Precisely I want to have a couple of flows:

First flow:

  1. user is logged in (access token is defined) go to home page
  2. user is not login go to login page

Second flow:

  1. user is on login page
  2. user go to registration page by click on link
  3. user is on registration page
  4. when user click browser back button it lead to login page

Problems:
I cannot see routes in browser url bar
When user click on browser back button it goes outside app

project zip: framework7.zip - Google Drive (I didn’t succesed to set up project https://codesandbox.io/)

Thanks in advance :slight_smile: Every suggestion is welcome.

Router code:

import NotFoundPage from '../pages/404.jsx';
import HomePage from '../pages/home.jsx';
import LoginPage from '../pages/login-page.jsx';
import RegistrationPage from '../pages/registration-page.jsx';
import ForgotPassword from '../pages/forgot-password.jsx';

var routes = [
  {
    path: '/',
    async: function({ router, to, resolve }) {
        let accessToken = localStorage.getItem('accessToken');
        // temporary hardcodede value
        accessToken = false;

        if (accessToken) {
            resolve({ component: HomePage});
        } else {
            resolve({ component: LoginPage});
        }
    },
  },
    {
        path: '/login/',
        component: LoginPage
    },
    {
        path: '/home/',
        component: HomePage,
        beforeEnter: function(routeTo, routeFrom, resolve, reject) {
            let accessToken = localStorage.getItem('accessToken');
            // temporary hardcodede value
            accessToken = false;
            if (!accessToken) {
                // No access token, redirect to Login page
                resolve({ component: LoginPage });
            } else {
                // Access token exists, proceed to home page
                resolve();
            }
        }
    },
    {
        path: '/registration/',
        component: RegistrationPage
    },
        {
        path: '/forgot-password/',
        component: ForgotPassword
    },
  {
    path: '(.*)',
    component: NotFoundPage,
  },
];

export default routes;

app.jsx code:

import React from 'react';
import {

  f7ready,
  App,
  Panel,

  View,
  Page,
  Navbar,
  Block,
} from 'framework7-react';


import routes from '../js/routes';
import store from '../js/store';

const MyApp = () => {

  // Framework7 Parameters
  const f7params = {
    name: 'Summy', // App name
      theme: 'auto', // Automatic theme detection
      colors: {
        primary: '#225a96',
      },
    //   darkMode: true,
      // Enable pushState to handle browser's back/forward buttons
      pushState: true,


      // App store
      store: store,
      // App routes
      routes: routes,

      // Register service worker (only on production build)
      serviceWorker: process.env.NODE_ENV ==='production' ? {
        path: '/service-worker.js',
      } : {},
  };

  f7ready(() => {


    // Call F7 APIs here
  });

  return (
    <App { ...f7params }>

        {/* Left panel with cover effect*/}
        <Panel left cover dark>
          <View>
            <Page>
              <Navbar title="Left Panel"/>
              <Block>Left panel content goes here</Block>
            </Page>
          </View>
        </Panel>
        {/* Your main view, should have "view-main" class */}
        <View main className="safe-areas" url="/" />
    </App>
  )
}
export default MyApp;