aiphton commented 2 months ago

NextUI Version

2.4.2

Describe the bug

System Stack

PHP Backend (Laravel)
React Frontend
Interia.js for passing data from backend to frontend

Bug description

I am using the navbar from nextui and it displays just as I expect. I use it on my landing page to navigate between anchor tags and even that works without a problem but when I visit an anchor tag and then reload the page I encounter a problem that I can not solve on my own. The anchor tag in the URL gets doubled when I visit the anchor tag and then reload the page (F5).

For example: http://localhost/#pricing http://localhost/#pricing#pricing http://localhost/#pricing#pricing#pricing#pricing ....

My setup in app.jsx looks like this:

import './bootstrap';
import '../css/app.css';

import { createRoot } from 'react-dom/client';
import { createInertiaApp, router } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import * as Sentry from '@sentry/react';
import './lib/i18n.jsx';
import { NextUIProvider } from '@nextui-org/react';
import React from 'react';

const appName = import.meta.env.VITE_APP_NAME || 'reminara';

createInertiaApp({
  title: () => appName,
  resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
    const root = createRoot(el);
    root.render(
      <React.StrictMode>
        <NextUIProvider>
          <App {...props} />
        </NextUIProvider>
      </React.StrictMode>
    );
  },
  progress: {
    color: '#4B5563'
  }
});

I read that I should at a router to the navigate prop. I tried this approach:

    root.render(
      <React.StrictMode>
        <NextUIProvider navigate={path => router.visit(path)}>
          <App {...props} />
        </NextUIProvider>
      </React.StrictMode>
    )

but that did not work aswell.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Visit the anchor tag
Reload the page
Reload the page again

Expected behavior

Reloading the page should reload with the URL http://localhost/#pricing without doubling the anchor tag.

Screenshots or Videos

No response

Operating System Version

Developing in Docker with WSL2

Browser

Chrome

linear[bot] commented 2 months ago

ENG-1310 [BUG] - Doubling of anchor tags

wingkwong commented 2 months ago

please try it on latest version (2.4.6) to see if it still reproduces the issue or not. I remember we've fixed similar issue before.
if it still reproduces the issue, please share a minimal reproducible sandbox for us to investigate. Thanks.

aiphton commented 2 months ago

Hi there,

Thank you for taking the time to debug my problem. I tried your first suggestion to update @nextui-org/react to version 2.4.6, but unfortunately, it didn't resolve the issue.

To help you better understand the problem, I've recreated my navbar in CodeSandbox. This is a minimal example, but it reproduces the bug as described in my original posting. The navigation buttons don't work for some reason in the sandbox. If I have some spare time, I'll investigate further. You can replicate the bug by manually typing a URL like URL#features and then reloading the page. For some reason, the anchor tag gets duplicated.

All the components for the navbar are located in resources/js/Components/Navbar.

If you need more information or anything else, please let me know—I'm happy to provide it.

Here is the link to the sandbox: https://codesandbox.io/p/devbox/tqklm2

Thank you!

wingkwong commented 1 month ago

@aiphton which page I should go to see the navbar?

aiphton commented 1 month ago

Hi, sorry I took so long to reply. I'm still trying to replicate my issue. I have problems connecting vite with laravel webserver. I'm still trying to fix that issue but I did make some progress. When I build my files with npm run build and then launch my application the issue does not occur. Only when I run the application with npm run dev.

I'll get back to you once I figured out how I can replicate it on the codesandbox platform