Search code examples
piral

Accessing Routes in a MenuContainer

I use piral for our micro-frontend app. I created a layout and use things like <Menu> in the layout.

I want to filter the entries in the nav menu by routes. Via convention i'll drop menu items depending on teh current route.

I only have one issue: how can I get access to the current route in the MenuContainer?

function Menu(props: MenuContainerProps) {
  const currentRoute = /* where to get it from?? */
  return /* my code */;
}

THANKS!

Solution

  • Piral just uses react-router-dom under the hood. Actually, this gives you access to anything from react-router and react-router-dom. As such hooks such as useHistory work in all components, e.g., your Layout, MenuContainer, or in any component of some pilet.

    Example:

    import { useLocation} from 'react-router-dom';

const Menu = (props: MenuContainerProps) => {
  const location = useLocation();
  const currentRoute = location.pathname;
  return /* my code */;
}

    Hope that helps!