React tutorial using react router v6 in react typescript with nested routes

In this article i will explain you step by step to use react router v6 with nested routes in react typescript project

Step 1: Create react typescript project with following command

npx create-react-app my-app --template typescript

Step 2: Install react router dom v6

Install react router dom v6 in your newly created project using following command

npm install --save react-router-dom@6

Step 3: Create Pages and component i will show you an example of Blog website

Create file src/pages/Blog.tsx and copy paste the following code

import React from "react";
import { Link, Routes, Route } from "react-router-dom";
import BlogCategoryWiseListing from "../components/blogcategory";
import AllBlogList from "../components/bloglist";

const Blog: React.FC<{}> = () => {
  return (
    <div className="album py-5 bg-light">
      <div className="container">
        <div className="row">
          <div className="col-md-2">
            <div className="list-group" id="list-tab" role="tablist">
              <Link
                className="list-group-item list-group-item-action active"
                id="list-home-list"
                data-bs-toggle="list"
                role="tab"
                aria-controls="list-home"
                to="/blog/javascript"
              >
                Javascript
              </Link>
              <Link
                className="list-group-item list-group-item-action"
                id="list-home-list"
                data-bs-toggle="list"
                role="tab"
                aria-controls="list-home"
                to="/blog/php"
              >
                Php
              </Link>
            </div>
          </div>
          <div className="col-md-10">
            <Routes>
              <Route path="/" element={<AllBlogList />} />
              <Route path="javascript" element={<BlogCategoryWiseListing />} />
            </Routes>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Blog;

Create file src/pages/Home.tsx and copy paste the following code

import React from "react";

const Home: React.FC<{}> = () => {
  return (
    <div>
      <h1>This is home component</h1>
    </div>
  );
};

export default Home;

Create file src/pages/Login.tsx and copy paste the following code

import React from "react";

const Login: React.FC<{}> = () => {
  return (
    <div>
      <h1>This is login component</h1>
    </div>
  );
};

export default Login;

Create file src/pages/SignUp.tsx and copy paste the following code

import React from "react";

const SignUp: React.FC<{}> = () => {
  return (
    <div>
      <h1>This is signup component</h1>
    </div>
  );
};

export default SignUp;

Create file src/components/NavBar.tsx and copy paste the following code

import React from "react";
import { Link, useNavigate } from "react-router-dom";

const NavBar: React.FC<{}> = () => {
  const navigate = useNavigate();
  return (
    <header className="p-3 bg-dark text-white">
      <div className="container">
        <div className="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
          <div
            onClick={() => {
              navigate("/");
            }}
            className="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"
          >
            <h4>Routing Example v6</h4>
          </div>
          <ul className="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
            <li>
              <Link to="/" className="nav-link px-2 text-white">
                Home
              </Link>
            </li>
            <li>
              <Link to="/blog" className="nav-link px-2 text-white">
                Blog
              </Link>
            </li>
          </ul>
          <div className="text-end">
            <Link
              to="/signin"
              type="button"
              className="btn btn-outline-light me-2"
            >
              Login
            </Link>
            <Link to="/signup" type="button" className="btn btn-warning">
              Sign Up
            </Link>
          </div>
        </div>
      </div>
    </header>
  );
};

export default NavBar;

Create file src/components/blogcategory.tsx and copy paste the following code

import React from "react";

const BlogCategoryWiseListing: React.FC<{}> = () => {
  return (
    <div>
      <h1>Blog Category Wise Listing</h1>
    </div>
  );
};

export default BlogCategoryWiseListing;

Create file src/components/bloglist.tsx and copy paste the following code

import React from "react";

const AllBlogList: React.FC<{}> = () => {
  return (
    <div>
      <h1>All Blog listing</h1>
    </div>
  );
};

export default AllBlogList;

Step 3: Update App.tsx file and create routes to navigate to different pages

import { BrowserRouter, Routes, Route } from "react-router-dom";
import NavBar from "./components/NavBar";
import Login from "./pages/Login";
import SignUp from "./pages/SignUp";
import Home from "./pages/Home";
import Blog from "./pages/Blog";
import AllBlogList from "./components/bloglist";
import BlogListingCategoryWise from "./components/blogcategory";
import "./App.css";

function App() {
  return (
    <div>
      <BrowserRouter>
        <NavBar />
        <div>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/signin" element={<Login />} />
            <Route path="/signup" element={<SignUp />} />
            <Route path="/blog" element={<Blog />}>
              <Route path="blog" element={<AllBlogList />} />
              <Route path="javascript" element={<BlogListingCategoryWise />} />
            </Route>
          </Routes>
        </div>
      </BrowserRouter>
    </div>
  );
}

export default App;

Nested routes defined for blog page

<Route path="/blog" element={<Blog />}>
  <Route path="blog" element={<AllBlogList />} />
  <Route path="javascript" element={<BlogCategory />} />
</Route>