MenuBar Template with react router

UI Components for React
Post Reply
marlondemelo1
Posts: 3
Joined: 13 Sep 2021, 23:40

15 Sep 2021, 01:27

Hello,

I am trying to use menubar template with react router:

Code: Select all

  const items = [
    {
      label: 'Cliente',
      icon: 'pi pi-fw pi-user',
      items: [
        {
          label: 'Novo',
          
          template: (item, options) => {
            return (
              <Link to="/cadastro/usuario" className={options.className} target={item.target} >                
                <span className={options.labelClassName}>{item.label}</span>
              </Link>
            )
          }

        }
    }
It works and redirect to the component, but the menu still keeping opened:

Image

If i put the onClick event option, the router doesnt work and the menu is closed...

i appreciate for some help thanks !

marlondemelo1
Posts: 3
Joined: 13 Sep 2021, 23:40

18 Sep 2021, 19:05

I solve this problem using command option in menuitem using useHistory hook:

Code: Select all

import { Menubar } from 'primereact/menubar';
import { InputText } from 'primereact/inputtext';
import { Link, useHistory } from 'react-router-dom';

const MenuPrincipal = () => {

    let history = useHistory()

    function navigateTo(string)
    {
      history.push(string)   
    }
  
  const items = [
    {
      label: 'Cliente',
      icon: 'pi pi-fw pi-user',
      items: [
        {
          label: 'Novo',
          icon: 'pi pi-user-plus',
          command: (event) => {
            navigateTo('/cadastro/usuario')
          }
        },
        {
          label: 'Deletar',
          icon: 'pi pi-fw pi-user-minus',

        },

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests