formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
97 stars 3 forks source link

Proper way to do single page app navigation with Button #200

Closed b-graves closed 7 months ago

b-graves commented 7 months ago

Hi, I've been using the Button component for navigation buttons within our react app, but wondering what the proper way to navigate using these buttons within a the single page app is. I currenttly have this:

import {  useNavigate } from 'react-router-dom'
...

const navigate = useNavigate();

return (
  <Button
    onClick={() => navigate(link)}
  >
    {children}
  </Button>
);

or this also works:

import {  Link } from 'react-router-dom'
...

return (
  <Link to={link}>
    <Button>
      {children}
    </Button>
  </Link
);

But neither seem like a good way to do it, am I missing something?

blvdmitry commented 7 months ago

Both seem ok and we suggest the same for NextJS as well. Probably the only thing I do differently myself is importing Link as RouterLink to understand that it's not a reshaped Link component. And all actionable components in Reshaped support all properties required by the routers for this exact reason

blvdmitry commented 7 months ago

Closing this, feel free to create a new issue if there are any more questions or ideas to share 🙌