Creating Application Layout and Installing Bootstrap
Explore how to create a structured application layout by integrating React Router for client-side navigation and installing Bootstrap for styling. Understand protected and authorized routes to manage user authentication and roles within your Meteor.js online bookshop application.
Application layout
The bookshop application’s structure determines that we have some of our components available to the users only if they’re authenticated. In the previous lessons, we implemented Meteor authentication using the accounts-password package. This lesson builds on the previous by adding client-side routing to the application.
React Router
A router is used by a single page application (SPA) to navigate between different screens or components of the application. React Router is a npm package that’s installed through the terminal to add routing capabilities to an application. An application that’s non-trivial needs a way to navigate between all components available in it.
The React Router is added to our project by running the command below on the terminal inside the project directory. This command installs and adds the router package to the project.
meteor npm install react-router-dom
The coding playground below captioned “React application with routing using React Router” is a sample React application that shows how React Router works. On line 2 of the app.js file, we import BrowserRouter as Router, Switch, Route, and Link` from the installed package.
The ...