Member-only story
Changing ReactJS Bootstrap NavBar Link to Routing Based for Single Page Application (SPA)
One great thing about ReactJS is the plethora of different packages, libraries, and tools that the frontend framework supports. While designing a webpage, I needed a design framework, that is Cascading Style Sheet (CSS), that can let me easily handle the responsive design and provide the different we components that I can use right away. For this, I decided to use Bootstrap, though there are many other open source CSS frameworks out there. Now, since I am designing with ReactJS, I can use Node Package Manager (NPM), though you can use Yarn, to find the Bootstrap made for ReactJS instead of using the plain Bootstrap. For this, I decided to use React Bootstrap. With one simple command, boom! I could leverage the ReactJS Bootstrap.
npm install react-bootstrap bootstrap
Everything worked well, but I encountered an issue while integrating the navigation bar link. I was using one of its components called NavBar, which looked like this.
