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.

import React, { Component } from 'react';//Import the css file for styling.import './About.css';export default class About extends Component {}

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

render() {return (<div className="about container"><div className='about-info container'><h1>About</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut justo in mauris lobortis bibendum nec nec tellus. Morbi est ipsum, pretium nec est vel, maximus congue metus. Proin eu euismod turpis, eget ornare nunc. Suspendisse id aliquet justo, eget ornare ligula. Nunc eu pretium nisi, vel maximus leo. Ut tempus risus quis ultricies dictum. Donec at mauris justo. Vestibulum ut lorem vitae tellus facilisis volutpat vitae quis purus. Suspendisse lobortis fermentum placerat.</p><p>Nam efficitur dui et urna ullamcorper rhoncus. Proin porta aliquet ipsum, ac volutpat diam auctor eu. Ut tristique odio ligula, ut aliquam ex consequat rutrum. In vel magna a velit rhoncus ornare. Phasellus arcu felis, consectetur non nunc nec, finibus rutrum libero. Nulla consequat lorem et felis semper, ut tempus orci lacinia. Sed molestie mi sodales lacinia scelerisque. Pellentesque tellus augue, molestie non sagittis sed, eleifend ac eros. Vivamus tortor quam, viverra sit amet libero a, dignissim auctor odio. In erat nulla, molestie a urna eu, porttitor euismod felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ipsum sapien, fermentum sit amet eleifend eget, consequat a lacus. Sed nulla odio, laoreet ut dictum sit amet, ornare quis augue. Nam blandit et metus ut vestibulum. Maecenas bibendum diam laoreet urna sollicitudin, in pellentesque diam condimentum.</p></div></div>);}

Copy and paste this to our About.css file.

.about-info.container {margin: 10%;}

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

import React, { Component } from 'react';//import the ProductCard component to display what is in the cart.import ProductCard from '../../presentational/ProductCard/ProductCard';//import the css file for stylingimport './Cart.css';//Define sample data for now to display in your cart.const sampleCartData = [{ name: 'Test 1', description: 'Test Product 1', price: 20, id: 1},{ name: 'Test 2', description: 'Test Product 2', price: 10, id: 2},{ name: 'Test 3', description: 'Test Product 3', price: 30, id: 3}]export default class Cart extends Component {render() {return (<div className='cart container'><div className='cart-info container'><h2>Your Cart!</h2><div>{sampleCartData.map(product => <ProductCard key={product.id} {...product} />)}</div></div></div>);}}

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.

//Now import your Router for your routes and wrap your app in it.import { BrowserRouter } from 'react-router-dom';

Then nest your App Component.

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

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.

//Need to import react becuase the Route itself is a component.import React from 'react';//Import the Route, and Switch Comopnent used for defining your routes.//Route is the route itself which can accept render props, but for the purpose of this tutorial we used the component and path prop.//Switch responsible for directing to first child that matches thier respective route.import { Route, Switch } from 'react-router-dom';

Now we will import our Components for each route.

//Now import the components you'll pass as props.import Home from './components/container/Home/Home';import About from './components/container/About/About';import Cart from './components/container/Cart/Cart';

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.

//When dealing with default exports we do not even need to name the export since when it is imported we can name it whatever we want.export default ();

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.

<Switch>
//Our Routes
</Switch>

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.

{/*Use the exact keyword means it will direct to that exact route, and used primarily when creating sub routes. */}<Route exact path='/' component={Home} />

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.

<Route path='/about' component={About} />

Then we will do the same thing for the Cart Component

<Route path='/cart' component={Cart} />

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.

//import withRouter so, you can access this.props.historyimport { withRouter } from 'react-router-dom';

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

//Define your linkFunc so it will redirect to specified route provided via argument.linkFunc(path) { this.props.history.push(path);}

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.

{/* Make sure every link uses linkFunc, except the login link. s*/}<p className="nav-link" onClick={() => this.linkFunc('/')}>Home</p><p className="nav-link" onClick={() => this.linkFunc('/about')}>About</p><p className="nav-link" onClick={() => this.linkFunc('/cart')}>Cart</p>

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.

About Component

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