Creating Application Layout and Installing Bootstrap

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 Router component, which was imported from the package, is a parent component and should be placed in the topmost layout of the application. Remember that the App component is usually the topmost component of our application. Because we’ve installed the router, however, we want the router component to be the parent so that all other components become its children.

 <Router>
   <App />
 </Router>

The Link component is like an anchor link on a web page that points to a specific location on a webpage. A Route renders a component when a path is matched, while a Switch looks through its children Routes and renders the first that matches the current URL.

In the example below, when the path of the URL is /about, the Switch component renders the Route for the About component. Click the “Run” button, and experiment with the sample application. We’ll install the react-router-dom package in our bookshop application next.