I have implemented primefaces menubar with react router.

First I have created a navigation items object as described in primefaces documentation.

navigationConfig.js looks like this:

 export const navitems = [
    {
        label: 'Africa',
        icon: 'pi pi-fw pi-user',
        url: '/africa'
    },
    {
        label: 'Europe',
        icon: 'pi pi-fw pi-pencil',
        url: '/europe'
    },
    {
        label: 'Asia',
        icon: 'pi pi-fw pi-th-large',
        items: [
            {
                label: 'Japan',
                url: '/japan'
            },
            {
                label: 'Mongolia',
                url: '/mongolia'
            },
            {
                label: 'Nepal',
                items: [
                    {
                        label: 'Kathmandu',
                        url: '/kathmandu'
                    },
                    {
                        label: 'Pokhara',
                        url: '/pokhara'
                    }
                ]
            }
        ]
    }
]

Then in my navigation component I have created a recursive method that maps each url of menu item into a command method which then calls a history.push() method of useHistory() hook from react-router-dom

Full navigation component looks like this:

import React from 'react';
import * as nav from '../config/navigation';
import { Menubar } from 'primereact/menubar';
import {Button} from 'primereact/button';
import { useHistory } from "react-router-dom";


const Navigation = (props) => {

    const history=useHistory();

    const getMenuObject=(menu)=>{
       
        let menuObj={};

        menuObj.label=menu.label;

        if(menu.items){
           //if the navigation has items property then map each item and call itself again
            menuObj.items=menu.items.map(nestedItem=>{
                return getMenuObject(nestedItem);
            });  
        }

        if(menu.icon){
            menuObj.icon=menu.icon;
        }
        if(menu.url){
            menuObj.command=()=>{
               navigatePage(menu.url);
            }
        }
       
        return menuObj;
    }

    const navigationMenu=nav.navitems.map(menuItem=>{
        return getMenuObject(menuItem);
    })
    
    const navigatePage=(url)=>{
        history.push(url);
    }


    return (
        <Menubar 
        model={navigationMenu}
        end={<Button label="Logout"  onClick={(e)=>props.onLogout(e)} icon="pi pi-power-off"/>}
        />
    );
}

export default Navigation;

Hope it will help whoever is looking for a solution.