Close Menu
Soshace Digital Blog

    Subscribe to Updates

    Get The Latest News, Updates, And Amazing Offers

    What's Hot
    Podcasts

    Engineering, Open-Source, and Interview-Heavy Web Development Podcasts — Part 2

    Programming

    1. Express.js Lessons. Basics and Middleware. Part 1.

    Programming

    Стиль кода

    Important Pages:
    • Home
    • About
    • Services
    • Contact Us
    • Privacy Policy
    • Terms & Conditions
    Facebook X (Twitter) Instagram LinkedIn YouTube
    Today's Picks:
    • Scaling Success: Monitoring Indexation of Programmatic SEO Content
    • Leveraging Influencers: Key Drivers in New Product Launches
    • How Privacy-First Marketing Will Transform the Industry Landscape
    • The Impact of Social Proof on Thought Leadership Marketing
    • Balancing Value-Driven Content and Promotional Messaging Strategies
    • Top Influencer Marketing Platforms to Explore in 2025
    • Emerging Trends in Marketing Automation and AI Tools for 2023
    • Strategies to Mitigate Duplicate Content in Programmatic SEO
    Monday, September 29
    Facebook X (Twitter) Instagram LinkedIn YouTube
    Soshace Digital Blog
    • Home
    • About
    • Services
    • Contact Us
    • Privacy Policy
    • Terms & Conditions
    Services
    • SaaS & Tech

      Maximizing Efficiency: How SaaS Lowers IT Infrastructure Costs

      August 27, 2025

      Navigating Tomorrow: Innovations Shaping the Future of SaaS

      August 27, 2025

      Maximizing Impact: Strategies for SaaS & Technology Marketing

      August 27, 2025
    • AI & Automation

      Enhancing Customer Feedback Analysis Through AI Innovations

      August 27, 2025

      Navigating the Impact of AI on SEO and Search Rankings

      August 27, 2025

      5 Automation Hacks Every Home Service Business Needs to Know

      May 3, 2025
    • Finance & Fintech

      Critical Missteps in Finance Marketing: What to Avoid

      August 27, 2025

      Analyzing Future Fintech Marketing Trends: Insights Ahead

      August 27, 2025

      Navigating the Complex Landscape of Finance and Fintech Marketing

      August 27, 2025
    • Legal & Compliance

      Exploring Thought Leadership’s Impact on Legal Marketing

      August 27, 2025

      Maximizing LinkedIn: Strategies for Legal and Compliance Marketing

      August 27, 2025

      Why Transparency Matters in Legal Advertising Practices

      August 27, 2025
    • Medical Marketing

      Enhancing Online Reputation Management in Hospitals: A Guide

      August 27, 2025

      Analyzing Emerging Trends in Health and Medical Marketing

      August 27, 2025

      Exploring Innovative Content Ideas for Wellness Blogs and Clinics

      August 27, 2025
    • E-commerce & Retail

      Strategic Seasonal Campaign Concepts for Online and Retail Markets

      August 27, 2025

      Emerging Trends in E-commerce and Retail Marketing Strategies

      August 27, 2025

      Maximizing Revenue: The Advantages of Affiliate Marketing for E-Commerce

      August 27, 2025
    • Influencer & Community

      Leveraging Influencers: Key Drivers in New Product Launches

      August 27, 2025

      Top Influencer Marketing Platforms to Explore in 2025

      August 27, 2025

      Key Strategies for Successful Influencer Partnership Negotiations

      August 27, 2025
    • Content & Leadership

      The Impact of Social Proof on Thought Leadership Marketing

      August 27, 2025

      Balancing Value-Driven Content and Promotional Messaging Strategies

      August 27, 2025

      Analyzing Storytelling’s Impact on Content Marketing Effectiveness

      August 27, 2025
    • SEO & Analytics

      Scaling Success: Monitoring Indexation of Programmatic SEO Content

      August 27, 2025

      Strategies to Mitigate Duplicate Content in Programmatic SEO

      August 27, 2025

      Effective Data Visualization Techniques for SEO Reporting

      August 27, 2025
    • Marketing Trends

      How Privacy-First Marketing Will Transform the Industry Landscape

      August 27, 2025

      Emerging Trends in Marketing Automation and AI Tools for 2023

      August 27, 2025

      Maximizing ROI: Key Trends in Paid Social Advertising

      August 27, 2025
    Soshace Digital Blog
    Blog / JavaScript / React / This Is How I Created a Simple App Using React Routing
    JavaScript

    This Is How I Created a Simple App Using React Routing

    Supun KavindaBy Supun KavindaFebruary 19, 2020No Comments10 Mins Read
    Facebook Twitter Pinterest Telegram LinkedIn Tumblr Email Reddit
    This Is How I Created a Simple App Using React Routing
    React Routing Interactive Tutorial
    Share
    Facebook Twitter LinkedIn Pinterest Email Copy Link
    React Routing Interactive Tutorial
    React Routing Interactive Tutorial

    This tutorial explains how I created a simple app using React Routing.

    Table of Contents

    • Motivation
    • Getting Started
    • Introduction to react-router-dom
    • Let’s create the app
    • Additional Work

    Motivation

    As a full-stack developer, I was used to jQuery for front-end development. However, lately, I’m much into React because it makes creating interactive UIs painless. After learning React core concepts, I created my first production React application. While creating this, I tried to create my own routing library using onpopstate, window.history, etc (PLEASE DON’T DO THAT). Finally, I understood that it’s one of the biggest mistakes I did in 2019.

    For the first single-page app I created in 2020, I decided to use the React Router. Wow! Creating the app was 1000 times easier than earlier, and no headaches 🤗 (That’s why 800k+ repositories use this router).

    The first thing I did was to learn how to use the React Router. For this, I used a learning-by-doing method. In this article, I’ll explain how I created a simple app using React Routing.

    Getting Started

    In this guide, we will be using the latest version (5.1.2) of the react-router-dom library, which includes DOM bindings for the react-router library. So, we can use it in our web app.

    To get started, first, let’s create a React app. The first option is by using create-react-app to get started (Not used in this tutorial). If you aren’t familiar with it, you can learn more from the create-react-app getting started guide.

    If you like that option, here’s the way.

    npx create-react-app routing-app
    cd routing-app

    Then, install the react-router-dom package (~415KiB).

    npm install react-router-dom

    Finally, start the dev server, which will watch for file updates and automatically reload the app in real-time.

    
    npm start
    

    However, I don’t like to download 100MB+ packages to my computer for a small learning project like this. Many developers faced the same problem. codesandbox.io is the solution.

    Visit the platform and use the template React (react-create-app).

    Create Sandbox: create-react-app
    Create Sandbox: create-react-app

    Then, add the dependency react-router-dom (Choose the latest version).

    Adding the dependency: react-router-dom
    Adding the dependency: react-router-dom

    It’s the same process as doing in the local machine. Instead of the local environment, here you have a virtual one. You can save it and share it with friends too.

    Introduction to react-router-dom

    In my opinion, react-router-dom is a great invention (and the only option available) to handle the browser routes in React. If you know how to think in react, you know how to use the library already.

    Before we start coding the app, let’s familiarize ourselves with the library react-router-dom.

    This library includes three main component types.

    1. Wrapper (Router) – <BrowserRouter> and <HashRouter>
    2. Navigators – <Link>, <NavLink>, and <Redirect>
    3. Route Matchers – <Route> and <Switch>

    1. Wrapper (Router)

    Called “Router” in the official documentation and the package, these are actually wrappers. You have to wrap Navigators and Route Matchers in a Router.

    • <BrowserRouter> uses regular paths.
    • <HashRouter> use (ugly, at least for me) hash of the URL.

    Most of the new apps use regular paths to keep the URLs professional and clean. So, we will use <BrowserRouter> in this tutorial.

    2. Navigators

    As the name explains, these are used to navigate through the app.

    • <Link> – This is a <a> element. However, when clicked, rather than reloading the page, this will change the path. to attribute is used to specify the path.
    • <NavLink> – Same as <Link>, but includes the special attribute activeClassName attribute which we can use to add a class when the to is matched. We will be using in this tutorial

    Ex:

    <NavLink to="/account" activeClassName="active">Account</NavLink>
    
    //
    // this will render
    // 
    // on /account page,
    // <a href="/account" class="active">Account</a>
    
    // on other pages
    // <a href="/account">Account</a>

    Cool right? However, I (maybe you too) have the question of why developers of react-router-dom didn’t add that attribute to <Link>. If you know, share it in comments.

    • <Redirect> – Used to redirect to a page.
    Read More:  Using Feature Flags for A/B Testing & Optionally Enable/Disable Features in Your NodeJS Project

    Ex: If you need to redirect from / to /app:

    <Route path="/" exact>
        <Redirect to="/app" />
    </Route>

    3. Route Matchers

    These are like conditionals in Javascript. If the path is matched, the inner JSX will be rendered. (You may have inferred it already from the last example).

    • <Route> – like an if statement.
    <Route path="/" exact>
        <SomeComponent />
    </Route>
    <Route path="/app">
        <SomeOtherComponent />
    </Route>

    By default, path="/" will match all /, /app, etc. exact is used to prevent it. You can also use the component attribute. (<NavLink> also support exact)

    <Route path="/app" component={App} />
    • <Switch> – like a switch statement with break statements in all the cases. It can wrap <Route> and will only render the first matched element.

    Another use of Switch is to render 404 pages. When no path is defined in Route, Switch will render it. So, in the end, we can add a 404 page.

    <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route component={TheNotFoundPage} />
    </Switch>

    So, here’s the stack we will be using in this tutorial.

    1. <BrowserRouter>
    2. <NavLink>
    3. Both <Route> and <Switch>

    Let’s create the app

    We will be creating a blog using the single-page app model. Usually, blogs like WordPress reload pages when navigating. We can use react to create a single-page blog.

    Here’s our plan:

    A plan
    A plan

    If you get stuck anywhere during this tutorial, you can refer to the codesandbox URL given at the bottom of this tutorial. A demo is also available.

    Let’s start creating App.js.

    import React from "react";
    import "./styles.css";
    import { BrowserRouter } from "react-router-dom";
    import Header from "./Header";
    import Body from "./Body";
    
    export default function App() {
      return (
        <BrowserRouter>
          <div className="App">
            <Header />
            <Body />
          </div>
        </BrowserRouter>
      );
    }

    Here we wrap the whole app in a <BrowserRouter> (Imported via import { BrowserRouter } from "react-router-dom";).

    The view is divided into two components: <Header> and <Body>.

    Header.js

    In the header, we include the links using <NavLink>. To prevent repetition of className and activeClassName, I’ve created a new function HeaderNavItem.

    import React from "react";
    import { NavLink } from "react-router-dom";
    
    export default function Header() {
      return (
        <header>
          <HeaderNavItem exact to="/" name="Blog" />
          <HeaderNavItem to="/about" name="About" />
          <HeaderNavItem to="/contact" name="Contact" />
        </header>
      );
    }
    
    function HeaderNavItem(props) {
      return (
        <NavLink
          to={props.to}
          className="nav-item"
          exact={props.exact ? true : false}
          activeClassName="active"
        >
          {props.name}
        </NavLink>
      );
    }

    Body.js

    Body is where we will render the components based on the URL path. In the body, we use <Route> and <Switch> from react-router-dom.

    import React from "react";
    import { Route, Switch } from "react-router";
    import About from "./About";
    import Blog from "./Blog";
    import Contact from "./Contact";
    import Post from "./Post";
    
    export default function Body() {
      return (
        <Switch>
          <Route path="/" exact component={Blog} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
          <Route path="/post/:slug" component={Post} /> { /* what's :slug? You'll learn it */ }
        </Switch>
      );
    }

    <About> and <Contact> are simple components like the following. You can customize them if needed.

    About.js

    import React from "react";
    
    export default function About() {
      return (
        <div className="about">
          <h1>I am a mysterious person!</h1>
          <p>I'm only available in the internet</p>
        </div>
      );
    }

    Contact.js

    import React from "react";
    
    export default function Contact() {
      return (
        <div className="contact">
          <p>
            You can contact me via Ghost mail. Don't know what it is? Then you are
            not a Ghost like me.
          </p>
        </div>
      );
    }

    <Blog> (Blog.js) is where we list the posts. However, we need some posts first to load. You can fetch it from an API (Check my previous post) or load it from files. To learn react router, how you load posts is not significant. Here, I have used a JSON file to store the posts to make it simple.

    Read More:  Mastering JavaScript Proxies: Practical Use Cases and Real-World Applications

    _posts.json

    [
      {
        "title": "Hello World",
        "slug": "hello-world",
        "content": "This is the Hello World post. WordPress says edit or delete this kind of posts. I say just keep it."
      },
      {
        "title": "React Lesson 1",
        "slug": "react-lesson-1",
        "content": "The first lesson of React is to learn Javascript first. So, search 'Javascript Tutorial' in Google and follow it. Then, come back here. You'll see the tutorial when you are an Javascript expert. (MAGIC)"
      }
    ]

    You can add whatever posts you need. (Those are just some funny posts)

    Blog.js

    import React from "react";
    import { Link } from "react-router-dom";
    
    // read JSON data
    const postsData = require("./_posts.json");
    
    export default function Blog() {
      const posts = postsData.map(post => {
        return (
          <Link to={"/post/" + post.slug} key={post.slug}>
            <div className="post-listing">
              <h1>{post.title}</h1>
            </div>
          </Link>
        );
      });
    
      return <div className="blog">{posts}</div>;
    }

    As we don’t need an active class added when the post is shown, I have used <Link> instead of <NavLink>. When the user clicks on post-listing, the location will be changed to /post/whatever-slug-in-json-file.

    We list the posts by looping through the postsData. (See React Lists and Keys) for more details.

    If we look at our Body.js, you will notice this.

    <Route path="/post/:slug" component={Post} />

    Here we use :slug as an URL parameter. So, <Post> component will be able to access the part after /post/ easily using props or hooks.

    Finally, Post.js (where Posts are shown)

    import React from "react";
    import { useParams } from "react-router";
    
    const postsData = require("./_posts.json");
    
    export default function Post() {
      var { slug } = useParams(),
        post = findPostBySlug(slug);
    
      return (
        <div className="post-content-view">
          <h1 className="title">{post.title}</h1>
          <content>{post.content}</content>
        </div>
      );
    }
    
    function findPostBySlug(slug) {
      return postsData.find(o => o.slug === slug);
    }

    import { useParams } from "react-router" is used to import the useParams hook. useParams returns an object containing all URL parameters with their key and value. Use object destructuring to get the needed value (slug in this case).

    findPostBySlug() is a simple function to find the article by slug. (Thanks to Šime Vidas on Stackoverflow)

    However, if you aren’t comfortable with React hooks, you can access the URL parameters via props.match.params.

    export default function Post(props) {
      var slug = props.match.params.slug;
    }

    Additional Work

    1. Adding CSS

    First, make sure your app is beautiful. Add some CSS! Here’s what I used.

    body {
      margin: 0;
    }
    .App {
      font-family: sans-serif;
    }
    
    a {
      color: #000;
      text-decoration: none;
    }
    
    header {
      background-color: #fafafa;
      height: 60px;
    }
    header .nav-item {
      padding: 0 15px;
      border-right: 2px solid #eee;
      height: 100%;
      display: inline-flex;
      align-items: center;
    }
    header .nav-item.active {
      background: #000;
      color: #fff;
    }
    
    .about,
    .contact {
      padding: 100px;
      text-align: center;
    }
    
    .post-content-view,
    .blog {
      padding: 40px;
      width: 600px;
      max-width: 100%;
      margin: auto;
    }
    
    .post-listing {
      background-color: #fafafa;
      border-radius: 5px;
      margin: 20px;
      padding: 15px;
    }

    2. Programmatical Navigation

    You can use <Redirect> when rendering as shown above. If you need it to do in any other function in a child component of <Route>, use props.history.push function.

    function Contact(props) {
    
        const handleClick = () => props.history.push('/some-other-page');
    
        return (
            <div>
                { /* some other components */ }
                <button onClick={handleClick}>Navigate</button>
            </div>
        );
    }

    Summary

    Here’s how we routed our app.

    • / – Posts Listing
    • /post/:slug – A post
    • /about – About page
    • /contact – Contact page

    Test it out.

    • Codesandbox.io
    • Live demo

    Conclusion

    Here’s what I found on a rating website.

    React Router pic
    React Router pic

    The React Router doesn’t have an alternative because it does everything. There’s a lot of other options/features you can use in the Router. The official documentation by react training outlines those with examples.

    Have questions? Let me know below.

    Thank you for reading.

    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Supun Kavinda

      Related Posts

      Streamlining Resource Allocation for Enhanced Project Success

      December 18, 2024

      Conducting Effective Post-Project Evaluations: A Guide

      December 16, 2024

      Strategies for Keeping Projects on Track and Meeting Deadlines

      December 10, 2024
      Leave A Reply Cancel Reply

      You must be logged in to post a comment.

      Stay In Touch
      • Facebook
      • Twitter
      • Pinterest
      • Instagram
      • YouTube
      • Vimeo
      Don't Miss
      Interview September 11, 2017

      Interview with Sergey

      I’m a professional full-stack Javascript developer from Saint-Petersburg, Russia. Since 2014 I have been building modern web apps using JavaScript technologies for clients from all over the world. I have a lot of experience in front-end development with React and Redux as well as with Node.js/Express on the backend side. I can create complicated visualization tools using D3 and highcharts, solving performance issues, reaching maximum speed and scalability.

      Top Lead Generation Strategies for MSPs in 2025

      May 3, 2025

      30 React JS Tools That You Can Use

      October 5, 2020

      13 Best Data Science Podcasts

      October 1, 2019

      Categories

      • AI & Automation
      • Angular
      • ASP.NET
      • AWS
      • B2B Leads
      • Beginners
      • Blogs
      • Business Growth
      • Case Studies
      • Comics
      • Consultation
      • Content & Leadership
      • CSS
      • Development
      • Django
      • E-commerce & Retail
      • Entrepreneurs
      • Entrepreneurship
      • Events
      • Express.js
      • Facebook Ads
      • Finance & Fintech
      • Flask
      • Flutter
      • Franchising
      • Funnel Strategy
      • Git
      • GraphQL
      • Home Services Marketing
      • Influencer & Community
      • Interview
      • Java
      • Java Spring
      • JavaScript
      • Job
      • Laravel
      • Lead Generation
      • Legal & Compliance
      • LinkedIn
      • Machine Learning
      • Marketing Trends
      • Medical Marketing
      • MSP Lead Generation
      • MSP Marketing
      • NestJS
      • Next.js
      • Node.js
      • Node.js Lessons
      • Paid Advertising
      • PHP
      • Podcasts
      • POS Tutorial
      • Programming
      • Programming
      • Python
      • React
      • React Lessons
      • React Native
      • React Native Lessons
      • Recruitment
      • Remote Job
      • SaaS & Tech
      • SEO & Analytics
      • Soshace
      • Startups
      • Swarm Intelligence
      • Tips
      • Trends
      • Vue
      • Wiki
      • WordPress
      Top Posts

      Build Real-world React Native App #0: Overview & Requirement

      Beginners November 6, 2020

      Strategies for Overcoming Prospecting Objections on LinkedIn

      LinkedIn December 9, 2024

      Essential Tips on How to Become a Full Stack Developer

      Programming October 5, 2019

      Three Essential Rules for Architecting iOS Unit Tests in 2020

      Beginners January 31, 2020

      Subscribe to Updates

      Get The Latest News, Updates, And Amazing Offers

      About Us
      About Us

      Soshace Digital delivers comprehensive web design and development solutions tailored to your business objectives. Your website will be meticulously designed and developed by our team of seasoned professionals, who combine creative expertise with technical excellence to transform your vision into a high-impact, user-centric digital experience that elevates your brand and drives measurable results.

      7901 4th St N, Suite 28690
      Saint Petersburg, FL 33702-4305
      Phone: 1(877)SOSHACE

      Facebook X (Twitter) Instagram Pinterest YouTube LinkedIn
      Our Picks
      JavaScript

      Project Manager Role

      Beginners

      TOP Most In-Demand IT Certifications 2020

      Programming

      1. Уроки Node.js .Модули. Часть 1.

      Most Popular

      Top 10 issues when hiring freelancers

      Remote Job

      Consequat Mauris Nunc Congue Nisivitae Tellus Consectetur

      JavaScript

      Programming Patterns. SOLID principle

      Programming
      © 2025 Soshace Digital.
      • Home
      • About
      • Services
      • Contact Us
      • Privacy Policy
      • Terms & Conditions

      Type above and press Enter to search. Press Esc to cancel.