Topic: Does one always need a Link via react router dom

Nates premium asked 5 years ago


So I noticed with many components eg a MDBBTn you have href attribute but when I use this field it always reloads the whole page i.e. not SPA effect.

I always have to wrap it inside a .. am I doing something wrong? Is there a way for it to behave like a SPA without using the Link?

If not, are there any best practices or advice when using it with MDB?

I usually put in my App.js, Router, route and switch and use CRA with Mdbootstrap.


Jakub Chmura staff answered 5 years ago


Hi @Nates,

If you want to keep SPA in your project you can not use href attributes because it will always reload the whole page (not only re-render changeable elements).

Link from react-router-dom was created especially for using it in applications like SPA.

So if you want to achieve a link effect without reloading page you should use Link from react-router-dom.

If you check our documentation you can see that some components use MDBNavLink component by default. If you use MDBNavLink in you project you don't need to use Link to wrap MDBNavLink, because this component has imported NavLink from react-router-dom.

Best regards,

Kuba


beras11 free commented 1 year ago

Hey @Jakub, I am having the same problem. I am using MDB navbar for my React SPA. it refreshes the whole application. I am noyt wrapping my MDBNavLink inside Link, but still refreshing the page


Nates premium answered 5 years ago


<Link to="/1">
            <MDBBtn>
                <MDBIcon icon="fas fa-play-circle" fixed /> Start
            </MDBBtn>
        </Link>

DevPaulLeon free commented 5 years ago

This worked for me! Thanks! <3


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: 4.21.1
  • Device: All
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: No