React Breadcrumbs component based on route


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) => {

  useEffect(() => {
    f7ready(() => {
      f7.views.main.on('routeChange', onRouteChange)
    return () => {'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

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!