MainNavigation hrefs aren't working in first level about scale HOT 5 CLOSED

Hi @christopherGdynia, thanks for reporting this issue - it really seems like the href property is not drilled down to the child component: #363

from scale.

Thanks for your answers :)

I found this solution, based on your ideas @acstll

  const handleClick = (e: MouseEvent, href: string) => {
    e.preventDefault();
    router.push(href);
  };

const navExample = {
      name: "Search",
      id: "Search41",
      href: "#search",
      onClick: (e: MouseEvent) => handleClick(e, "#search"),
      icon: "action-search",
    };

I will close #361 and link this post.

from scale.

Hi @christopherGdynia, thanks for your question.

I'm assuming from #361 that you're using Next.js, right?

The links inside the Scale header are plain <a> tags, so they won't directly work with client-side routing depending on the framework you're using (some work, some don't).

There is a way to work around this, by providing an onClick prop in the mainNavigation data and handling the routing programmatically using the useRouter hook from Next.js:

Something like this should work (haven't tested it myself):

import { useRouter } from 'next/router'

function NavigationExample({ children, href }) {
  const router = useRouter()

  const handleClick = (e) => {
    e.preventDefault()
    router.push(href)
  }
  const mainNav = [
    { name: "Home", id: "home", href: "/", onClick: handleClick },
    { name: "About", id: "about", href: "/about", onClick: handleClick },
  ]

  return (
    <ScaleAppShell mainNavigation={mainNav}>
      {/* ... */}
    </ScaleAppShell>
  )
}

Would you be able to try this out?

from scale.

OK, fix is released: 3.0.0-beta.11. Thanks again for raising this issue!

from scale.

Amazing, glad to hear.

from scale.