Now lets finish our basic setup of our frontend, then we will start setting up our authentication.

If you haven’t done previous steps I would recommend going over them.

Before configuring our routes we will setup components for our routes, such as the Cart and About.

Let’s first setup our About Component. Go to our About folder, and About.js file and import React and the named export Component since we are creating a stateful component, and therefore be using the class keyword once again. Also import the corresponding css file. Similar how we did in our Home, and Navbar component.

Let’s define the render method, and put sample text.

Copy and paste this to our About.css file.

Let’s define our Cart component and have sample data for the moment. Define similar to About component, and import our ProductCard component.

Finally we setup our routes.

Lets start configuring our Routes using react-router-dom .

Here is the documentation for react-router-dom for reference.

Lets first go to our index.js file in our src folder. Import BrowserRouter, and nest our app in our ReactDOM.render.

Then nest your App Component.

Now lets define our routes, go to our routes.js file. Then import React, and also import the Route, and Switch Component from react-router-dom.

Now we will import our Components for each route.

Then we will then just do a export default to our routes, and we do not no need to name them since it is a default export, and name it whatever we want when importing it.

Now lets define our routes within the parenthesis of our default export.

We will first use our Switch component. Which will go to the first child matching by it’s route.

Let’s define our first route. Which will be our home route. Each component has a path which is the path of the route, and the component prop which will take a component to render based on that path. We’ll use the exact keyword before our path so it will go to that exact route. It is useful when defining subroutes within our routes.

Now we can define our routes normally since they are subroutes of the home route. So we will give our Route component a path, and a component prop. Our path will be ‘/about’ and Component will be About.

Then we will do the same thing for the Cart Component

Great we have our routes now setup. Let start configuring our routes with our Navbar. We will use the this.props.history to redirect the user to that route. Instead of using the window.location. Let’s first import withRouter in our Navbar component in between our react import, and css file import.

Now let’s define the method that directs to that route.

Now for each link we will use the function for the onClick so when the user clicks it will direct them to that route provided as a argument. We will have it in a form of a callback, so we won’t have to bind the method. We will use it for all of them except the login link.

The final step is that we are gonna delete the export default from the class, and instead export the component at the bottom, where we will withRouter HOC which will give it the props of react-router-dom.

Now our links should route to our components set to those routes.

Image for post
Image for post
About Component
Image for post
Image for post

Congratulations! You just setup your routes for your components.

Here is my github for reference.

Here is the next step where will start setting up authentication:

Happy Coding!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store