FullStack Labs

Please Upgrade Your Browser.

Unfortunately, Internet Explorer is an outdated browser and we do not currently support it. To have the best browsing experience, please upgrade to Microsoft Edge, Google Chrome or Safari.
Welcome to FullStack Labs. We use cookies to enable better features on our website. Cookies help us tailor content to your interests and locations and provide many other benefits of the site. For more information, please see our Cookies Policy and Privacy Policy.

Angular to React.js - Routing (Part 2 of 6)

Written by 
Angular to React.js - Routing (Part 2 of 6)
blog post background
Recent Posts
Integrating GitHub Actions and Docker for a Java Project
Businesses Must Seize the AI Wave (Or Cease to Exist)
Code, Deploy, Succeed: Next.js, Firebase, and Tailwind CSS Unleashed

Welcome back to the second part of my six-part guide for Angular developers looking to learn React. Over the course of the series, we will rebuild Angular’s starter app example in React, covering each section of the Angular Starter docs in a separate article.

Table of contents

In the previous article, we reviewed the essential elements of the React template, the prop system, and the communication that takes place between parent and children components. In this article, we will discuss routing. Happy coding! :D

Routing in React vs. Routing in Angular

In general, React and Angular handle routing a bit differently.

Angular provides a routing service, but React requires developers to incorporate their own. There are a variety of React routing libraries listed in the React Documentation (you can find the list here). We will use the most popular library for this tutorial, React Router DOM.

React uses a Router component similar to Angular’s <router-outlet></router-outlet>, however it doesn’t use a configuration object. Instead, it specifies routes as child components.

In React, the <link> component replaces the <a></a> element when connecting separate URLs within a single-page application (SPA). When linking to an external resource, you will still generally use <a></a>.

The Project

Please fork this repo to continue working on our React project. You can find the Angular tutorial we are referencing here.

Registering a Route in React

Let’s start by creating the Product Details Component. First, create a ProductDetails.js with the following code:

-- CODE language-jsx keep-markup --
import React from 'react';
const ProductDetails = () => {  
    return (    
        <div classname="product-deatils"></div>
            <h2>Product Details works!</h2>

exportdefault ProductDetails;

Let’s integrate React Router Dom. Go to the index.js and import the BrowserRouter Component.

-- CODE language-jsx keep-markup --
import { BrowserRouter as Router, Route } from "react-router-dom";

Replace Fragment with BrowserRouter.

-- CODE language-jsx keep-markup --
    /* Other components  */

Then, replace ProductList with Route.

-- CODE language-jsx keep-markup --
    <div classname="container"></div>
        <route exact="" path="/" component="{ProductList}"></route>

Next, go to ProductList.js and import the Link component. It will render a valid <a></a> element and prevent the default behavior. It will also map the given props options on to the final anchor returned.

-- CODE language-jsx keep-markup --
import { Link } from "react-router-dom";

Add the match prop in line 9.

-- CODE language-jsx keep-markup --
const ProductList = ({ name, match }) => {

Finally, replace <a></a> with the following:

-- CODE language-jsx keep-markup --
<link to="{`${match.url}products/${index}`}" title="{`${product.name}" details`}="">  
    { product.name }

At this point, the application will be able to:

  1. Display the index page.
  2. Navigate to the Product Details Page when a product title is selected.

Using Route Information

In this section, we will pull the product details from the URL and pass it to the ProductDetails component. This will allow the ProductDetails component to display a product when it is selected from the ProductList page.

Go to the index.js and import the ProductDetails component.

-- CODE language-jsx keep-markup --
import ProductDetails from './ProductDetails';

Add a route for the product detail page:

-- CODE language-jsx keep-markup --
<route path="/products/:productId" component="{ProductDetails}"></route>

To read the param provided in the URL, replace the contents of ProductDetails.js with:

-- CODE language-jsx keep-markup --
import React from 'react';
import {products} from './products';

const ProductDetails = ({ name, match }) => {  
    const { params: { productId }} = match;  
    const product = products[productId];  

    return (    
        <div classname="product-deatils"></div>
            <h2>Product Details</h2>
                <h3>{ product.name }</h3>
                <h4>{ product.price }</h4>
                <p>{ product.description }</p>

exportdefault ProductDetails;

At this point the app should be able to display the product details on a product page. However, the product price will be missing a currency indicator. Angular uses a currency pipe to format a number into a monetary value. Pipes are essentially functions, so we can simply create a function to replicate Angular’s Currency Pipe.

To create the currency function, we need to use the built-in Number method toLocaleString. Start by adding the currency function to the ProductDetails.js file.

-- CODE language-jsx keep-markup --
const currency = number => {  
    return number.toLocaleString(    
            style: "currency",      
            currency: "USD",      
            minimumFractionDigits: 2    

Then, use the function to format the price.

-- CODE language-jsx keep-markup --
<h4>{ currency(product.price) }</h4>


  • The Angular solution to this tutorial can be found here.
  • The React solution to this tutorial can be found here.

Learning how to code with React has made me a better Javascript developer. When you start working with React, you have to use many of Javascript’s core functionalities. You will also discover more elegant and efficient ways to write code.

In the next post, we will cover data management. I hope you found this tutorial useful for understanding routing in React!


At FullStack Labs, we pride ourselves on our ability to push the capabilities of cutting-edge frameworks like React. Interested in learning more about speeding up development time on your next project? Contact us.

Written by
People having a meeting on a glass room.
Join Our Team
We are looking for developers committed to writing the best code and deploying flawless apps in a small team setting.
view careers
Desktop screens shown as slices from a top angle.
Case Studies
It's not only about results, it's also about how we helped our clients get there and achieve their goals.
view case studies
Phone with an app screen on it.
Our Playbook
Our step-by-step process for designing, developing, and maintaining exceptional custom software solutions.
VIEW OUR playbook
FullStack Labs Icon

Let's Talk!

We’d love to learn more about your project.
Engagements start at $75,000.

company name
Type of project
How did you hear about us?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.