Strange Error When Using BrowserHistory

Questions
1

Going back always gives an error when using the browserHistory property.

async-component.js:10:13 Uncaught (in promise) Error: 
TypeError: Cannot read properties of undefined (reading 'children')

This issue does not crash the app. I created an example but for some reason it didn’t give an error, I think I could use it wrong.

App.jsx

const f7params = {
  name: "Rabbit Mail",
  id: "com.candlelight.rabbitmail",
  theme: "md",
  colorTheme: "teal",
  view: {
    browserHistory: true,
    browserHistorySeparator: "",
  },
  swipeout: {
    noFollow: true,
  },
  routes,
  store,
};

export default function Main() {
  return (
    <App {...f7params}>
      <View main url="/" className="safe-areas" masterDetailBreakpoint={768} />
    </App>
  );
}

Routes.js

const routes = [
  {
    path: "/",
    beforeEnter({resolve, reject}) {
      if(store.state.user === null) {
        reject();
        this.navigate("/login");
      } else
        resolve();
    },
    asyncComponent: () => import("./pages/HomePage"),
    master: true,
  },
  {
    path: "/mail/:mailId",
    component: MailPage,
  },
  {
    path: "/login",
    component: LoginPage,
  },
  {
    path: "/register",
    component: RegisterPage,
  },
  {
    path: "/profile",
    component: ProfilePage,
  }
];

export default routes;
2

Also, if I want to go directly to a page (localhost:3000/profile) instead of the main screen (localhost:3000), an error occurs here.

Uncaught TypeError: 
Cannot read properties of undefined (reading 'length') 
modal-class.js:36
1 Like