如何覆盖导航下拉@coreui/react

Question

I'm using coreui in my react project and to be more specific - appSideBarNav, which I use to represent folders. The problem is that folders can be nested and when the folder(let it be A) have a child(B), the A-folder would become nav-dropdown. When you click on A-folder, you have to be redirected to url/A, but instead the Dropdown element gets toggled and no redirect happens. In other words - you can be redirected by only Folders, which do not have any children. Remarkable, that all folders has correct url attribute. In addition, I pass onClick function to every folder to see if it has been triggered after clicking on it in the list, and Only Folders without children trigger onClick function after being Clicked.

Code example below represents recursive function of Filling the appSideBarNav with folders:

        const addFoldersToNav = (folders, sourceURL = '/mail/') => {
            return (folders.map(item => {

                console.log('creating and adding folder')
                const folder = {
                    name: (item.Type == 10) ? item.Name : i18next.t(item.Name.toLowerCase() + '_folder'),
                    url: sourceURL + item.Name,
                    icon: folderTypes.get('' + item.Type),
                    // onClick: (console.log('wow')),
                    attributes: {
                        onClick: event => {
                            console.log('clicked')
                            event.nativeEvent.stopImmediatePropagation()
                            window.location = "#" + sourceURL + item.Name;
                            localStorage.setItem('Path', sourceURL + ':folderId/:selectedId?')
                        },
                        onToggle: () => { console.log('toggled') },
                    },
                    wrapper: {
                        element: <input onClick={console.log('wrapped')} />
                    },
                    notSeenAmount: 0,
                    id: inc++,
                    children: (item.SubFolders) ? addFoldersToNav(item.SubFolders['@Collection'], sourceURL + item.Name + '/') : null,
                }
                return folder
            }))
        }

Answer 1

Have a look here https://github.com/coreui/coreui-react/blob/master/src/SidebarNav.md#navconfig-shape

To override default behavior of nav-dropdown toggle and navigate to url use custom onClick method:

{ name: 'Base', url: '/base', icon: 'icon-puzzle', attributes: {onClick: (e, item)=>{ console.log(e, item) }}, // (v2.5.6 up) optional children: [] }

This helped to solve my problem which was quite the same as yours