Setting up a React router app

Let's create a React app,

npx create-react-app react-router-example

Then replace the App.js file with a simple component,

import React from 'react';
import './styles.css';

export default function App() {
  return (
    <div className="App">
      <h3>React Router from JS Mates</h3>
      <p>
        We will create a simple Help center app and Learn the concepts of React
        router along the way
      </p>
    </div>
  );
}

As the description says, we are going to create a Help center app. It will have,

  • Topics and
  • FAQs

Each topic will have many FAQs. Let's have a sample data for topics and faqs. Create a folder data and then add two JSON files - topics.json and faqs.json

// topics.json

[
  {
    "title": "Vitae nisi amet expedita sunt animi.",
    "description": "Sequi odio quo et. Dignissimos eligendi veritatis et quia voluptates magnam quod. Facere perferendis unde vero molestiae quo dolores. Nisi nihil saepe consequuntur maxime magni rerum vel.\n \rReprehenderit architecto aliquam nam quis totam nesciunt vel quo at. Unde consectetur rerum ut quos et laudantium. Rerum dolores expedita deleniti ullam. Repellendus nobis aut est perferendis ullam.\n \rAut dolorum sed debitis sapiente veritatis esse et quas voluptas. Ratione aut officiis consequatur et nihil velit. Deleniti id amet eos assumenda dolorem ut. Est unde iste id quo et eos. Et a beatae occaecati sed sed fugiat a magnam.",
    "_id": "f53ea2c90eca4372a6038fffdbdc573a"
  },
  {
    "title": "Voluptate ut quae et nulla impedit minus praesentium sint.",
    "description": "Accusantium provident rerum tempore nihil. Distinctio enim incidunt. Fuga beatae ea at aut ut quasi ut aliquid reiciendis. Voluptates maxime aut tenetur sapiente.\n \rMinus ut ab rem et. Sint maxime rem velit rem quasi autem. Iure rerum numquam cumque. Aliquid architecto iste rerum.\n \rIpsum ipsam sint laboriosam saepe autem assumenda et. Placeat corrupti ducimus. Eius magni vitae iure rerum iusto aut magnam praesentium dolores. Debitis quae eos iure ducimus nam iusto laborum voluptatem sunt. Temporibus reprehenderit velit accusamus alias tempore. Atque nisi placeat et dolorem corporis laudantium.",
    "_id": "cada8c6bbe0f4aa09e0879daf0ad2fc7"
  },
  {
    "title": "Perspiciatis et ut optio repellendus et suscipit.",
    "description": "Quas saepe et modi porro ea similique minus. Ducimus explicabo eius vel atque ullam. Voluptatem sequi modi non odio. Reiciendis similique magni autem est voluptatem doloribus ut dolor.\n \rQuod ratione numquam est ad qui sunt. Quia omnis neque qui ipsam culpa natus magni nisi. Minima voluptas quia veniam libero ratione aut quidem repudiandae est.\n \rEa error cumque. Soluta cupiditate vero dolorem exercitationem dolorem rerum enim quia. Earum laboriosam deserunt. Vero architecto esse vel. Corrupti temporibus asperiores maiores dolores labore ea. Praesentium sapiente consequatur illum sit ut eum voluptas.",
    "_id": "676ad79504b34a1c84aeabf3745d567a"
  }
]

then the faqs.json file will be,

[
  {
    "question": "Aliquam quasi doloribus illum blanditiis.",
    "answer": "Est illum omnis et quam sed adipisci. Ducimus earum voluptatibus et. Nihil illo est et error. Reiciendis qui autem aut ratione molestiae incidunt et et. Ut beatae dolorem quos.\n \rQuibusdam laborum eaque tenetur. Architecto omnis sunt sunt impedit perferendis qui quidem omnis veritatis. Minima et illo error omnis id quia exercitationem rerum et.\n \rEum ex totam. Sit nostrum aliquid aut totam ut. Odio et minus. Numquam qui rerum et recusandae fugiat. Ducimus at officia perferendis iusto est.",
    "topicId": "f53ea2c90eca4372a6038fffdbdc573a",
    "_id": "c212f333b7024107b6c2f405228d53da"
  },
  {
    "question": "Laudantium illo sunt cumque id fugit error libero.",
    "answer": "Dolorem eius iste quae eos velit voluptate. Magni blanditiis est. Aliquid quas id maiores aperiam ut consequatur.\n \rA est quia illo enim. Tempore omnis sequi et dolores. Mollitia provident hic. Fugiat perferendis labore velit temporibus ut. Earum nihil quia iste. Corrupti ut ipsa voluptatibus.\n \rIn facilis cupiditate ut eaque sunt inventore blanditiis. Magni quos reprehenderit voluptatum recusandae tempora laborum pariatur est repellat. Animi hic doloribus exercitationem accusantium rerum exercitationem facilis et fuga.",
    "topicId": "cada8c6bbe0f4aa09e0879daf0ad2fc7",
    "_id": "0e045a145d6b47128de83aa90a446a8a"
  },
  {
    "question": "Placeat sunt molestiae illum nihil.",
    "answer": "Qui doloribus omnis voluptatem pariatur. Minus nesciunt totam nobis odio quasi laboriosam. Aut suscipit voluptatem. Modi minima asperiores nihil sapiente ea eum. Nam nisi voluptas nostrum iure nostrum perspiciatis beatae aliquam. Omnis architecto maxime omnis ea.\n \rQuia quidem veritatis sequi ratione est porro. Nulla delectus a dolores sunt maiores. Aut illo suscipit ipsa commodi praesentium unde consequatur nihil qui.\n \rCommodi impedit vel voluptatem necessitatibus nostrum. Sint odio ea alias quae corporis repudiandae fugiat. Ut voluptas nihil unde incidunt.",
    "topicId": "cada8c6bbe0f4aa09e0879daf0ad2fc7",
    "_id": "9da408916a84404daa8a62fd8edbac8d"
  },
  {
    "question": "Accusamus aliquam aperiam dicta et illum nihil.",
    "answer": "Eius molestiae omnis nihil aut. Aliquid soluta sunt quia aut sit sunt distinctio. Architecto optio dolores labore accusamus reprehenderit consequuntur perferendis quam. Asperiores temporibus velit deleniti.\n \rAt culpa quos excepturi. Voluptas voluptatem quia iste distinctio ullam delectus sunt iste ipsa. Molestias quia et eaque labore voluptates necessitatibus dolores culpa voluptatem.\n \rAccusamus iste ullam sit enim culpa. Vero aspernatur dolor omnis autem qui eum molestiae. Quos sit eius earum rerum sed. Quis totam est et culpa tempora non dolores exercitationem.",
    "topicId": "cada8c6bbe0f4aa09e0879daf0ad2fc7",
    "_id": "3821d497915a4a869bbe32e398ff0061"
  },
  {
    "question": "Laborum soluta odit unde vitae.",
    "answer": "Totam dolorem neque asperiores repudiandae ratione earum debitis qui. Earum aut eius labore nesciunt accusantium recusandae. Aspernatur deserunt dolor quasi odio incidunt eveniet.\n \rNon voluptatem repellat sunt laborum ab sunt veniam. Veritatis voluptas quia nihil maiores voluptatum et qui excepturi. Facilis quas cumque deleniti dolorum aut vel. Nulla consequatur reprehenderit impedit vel est.\n \rUt aut iusto consequatur quia excepturi. Corporis debitis labore rerum ea omnis explicabo. Quos doloribus et. Voluptatem voluptatem nemo debitis.",
    "topicId": "cada8c6bbe0f4aa09e0879daf0ad2fc7",
    "_id": "34ab06e49cbf463c84626077b903ee8e"
  },
  {
    "question": "Ipsum in sed deleniti unde eveniet.",
    "answer": "Qui magnam aut enim maiores possimus quasi occaecati ratione. Labore deserunt non ducimus sed sequi. Sint voluptatem provident veniam tempora. Laboriosam suscipit totam. Aperiam sapiente enim quod. Laboriosam repellendus est totam quia magni distinctio velit.\n \rAccusantium vel aut animi. Unde sapiente nemo dicta. Voluptate nihil velit. Ab harum aut id quo. Exercitationem enim ducimus porro dignissimos est incidunt fuga eaque et. Soluta velit itaque pariatur.\n \rIure iusto voluptatem aut et corrupti asperiores ad itaque repellendus. Praesentium at voluptas dolor. Et voluptatem doloribus quam aut. Libero nulla eius ea deserunt molestias. Accusamus repudiandae provident. Voluptate quo maiores occaecati libero quo minus voluptatibus sint.",
    "topicId": "f53ea2c90eca4372a6038fffdbdc573a",
    "_id": "a7a6066f48cf4fcaa89c7e681cbf1d77"
  }
]

We are going to create these pages,

  • Home page
  • About page
  • Topics page
  • FAQs page per topic
  • Each FAQ will get a page

While creating these pages, we will learn the concepts of React Router. Let's install React Router,

yarn add react-router-dom

We are going to use version 5 of React router dom in this course. Check out our current application and play with it,

In next lessons, we will use react-router-dom library to create all our pages.