Fix router to accept nested routes

[rluders]

Description

The current route structure doesn't support nested routes, which causes some undesired full-page reloads while navigating between pages.

Steps to reproduce

Steps to reproduce the behavior:

1. Clone the repo and run the project
2. Login with any account
3. Navigate between the pages
4. See that it refreshes the whole page every time

Expected behavior

It should only load the content part of the page.

Screenshots

Screencast from 11-13-2022 09:26:11 AM.webm

Desktop (please complete the following information):

N/A

Smartphone (please complete the following information):

N/A

Additional context

N/A

[rluders]

It is almost 100% done. I'm not sure why it isn't working for the sidebar links. I'll double check it later.

[marianysilva]

Live code video

I tried to reproduce this page reload issue by adding a simple HTML component in the Sidebar component:

      <nav>
        <ul>
          {mainMenuItems.map(({ label, route, icon }: MenuListItemProps) => (
            <li key={route}>
              <NavLink to={route}>{label}</NavLink>
            </li>
          ))}
        </ul>
      </nav>

And I saw that it didn't happen.

I noticed that in <FlowbiteSidebar.Item /> of settingsMenuItems we are using the prop as={NavLink}, but in <FlowbiteSidebar.Item /> of mainMenuItems we didn't declare this, I don't know if it was on purpose. When I try to use the prop as={NavLink} the sidebar navigation stops working.

I believe this bug will have to be opened in the React Flowbite library, I don't know if it is related to an open issue.

[rluders]

@marianysilva So, I think that we have two things happening here:

• When you use as={NavLink}, I think that you need to change href= with to=.
• There was an PR created to improve how links are handled inside the navbar. But the change was dropped, maybe we could think about it, and consider some approach proposed there to improve the usage of as= or if we should use children for linking instead.

And last but not least, great job figuring out what was happening, I was utterly lost on this one.

[rluders]

Only when we are navigating between pages using the sidebar menu.

[marianysilva]

@marianysilva So, I think that we have two things happening here:

• When you use as={NavLink}, I think that you need to change href= with to=.
• There was an PR created to improve how links are handled inside the navbar. But the change was dropped, maybe we could think about it, and consider some approach proposed there to improve the usage of as= or if we should use children for linking instead.

And last but not least, great job figuring out what was happening, I was utterly lost on this one.

flowbite-reac PR merged