React Breadcrumbs component based on route

Hi!

I want to create a general breadcrumb component that should update state based on router changes. What is a good way for the component to know about state changes based on router?

By listening for routeChange event on router (for example on main View’s router):

import { f7, f7ready } from 'framework7-react';
import { useState, useEffect } from 'react';

const Breadcrumbs = () => {
  const [route, setRoute] = useState(null);

  const onRouteChange = (newRoute) => {
    setRoute(newRoute);
  }

  useEffect(() => {
    f7ready(() => {
      setRoute(f7.views.main.router.currentRoute);
      f7.views.main.on('routeChange', onRouteChange)
    });
    return () => {
      f7.views.main.off('routeChange', onRouteChange)
    }
  }, [])

  return (
    <div>Current url is {route.url}</div>
  )
}

Wait, you can get the f7 and f7ready from ‘framework7-react’? You should document that. You wouldn’t believe the weird code I’ve needed to get there.

1 Like

Maybe you added those when you did svelte? There is documentation for that in the svelte area, but not React (or Vue).

It is there https://framework7.io/react/react-component-extensions.html

If you use functional components, then previously described extensions will not work. Framework7 instance, f7ready method and theme can be imported directly from Framework7-React library. Device, Request and Support can be imported directly from Framework7 core library.

Weird it didn’t come up in search. Glad to have these!