Nested Routes in React JS

Welcome back! Today, we're diving into a fascinating concept called Nested Routes in React JS. Let's get started! 🎯

Understanding Nested Routes

In a React app, we often have multiple levels of routes. For instance, a blog might have a home page, a list of categories, and then individual blog posts within each category. These nested routes help us build complex, multi-level applications easily. 💡

jsx

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function Home() {
  return <h1>Welcome to Home</h1>;
}

function Blog() {
  return <h1>Welcome to Blog</h1>;
}

function Category() {
  return <h1>Welcome to Category</h1>;
}

function Post() {
  return <h1>Welcome to Post</h1>;
}

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/blog" component={Blog} />
        <Route path="/category" component={Category} />
        <Route path="/post" component={Post} />
      </Switch>
    </Router>
  );
}

export default App;

In the example above, we have four routes: Home, Blog, Category, and Post. Each route represents a page in our application. However, this setup doesn't support nested routes. Let's see how we can create nested routes. 📝

Creating Nested Routes

To create nested routes, we'll use the Route and Switch components along with a new component called RouteWithSubRoutes. Here's how it looks:

jsx

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

function Home() {
  return <h1>Welcome to Home</h1>;
}

function Blog() {
  return (
    <div>
      <h1>Welcome to Blog</h1>
      <Link to="/blog/category1">Category 1</Link>
      <Link to="/blog/category2">Category 2</Link>
    </div>
  );
}

function Category({ match }) {
  return <h1>Welcome to {match.params.category}</h1>;
}

function Post({ match }) {
  return <h1>Welcome to {match.params.post}</h1>;
}

function RouteWithSubRoutes(route) {
  return (
    <Route
      path={route.path}
      render={(props) => (
        <div>
          <h1>{route.title}</h1>
          {route.routes.map((subRoute) => (
            <RouteWithSubRoutes key={subRoute.path} route={subRoute} />
          ))}
          <Route path={route.redirect} exact component={Redirect} />
        </div>
      )}
    />
  );
}

function App() {
  const blogRoutes = [
    {
      path: '/blog',
      title: 'Blog',
      redirect: '/blog',
      routes: [
        {
          path: '/blog/category1',
          title: 'Category 1',
          routes: [
            { path: '/blog/category1/post1', title: 'Post 1' },
            { path: '/blog/category1/post2', title: 'Post 2' },
          ],
        },
        {
          path: '/blog/category2',
          title: 'Category 2',
          routes: [
            { path: '/blog/category2/post1', title: 'Post 1' },
            { path: '/blog/category2/post2', title: 'Post 2' },
          ],
        },
      ],
    },
  ];

  return (
    <Router>
      <Switch>
        <RouteWithSubRoutes index={true} route={{ path: '/', title: 'Home', redirect: '/' }} />
        {blogRoutes.map((route) => (
          <RouteWithSubRoutes key={route.path} route={route} />
        ))}
      </Switch>
    </Router>
  );
}

export default App;

In the example above, we've created a nested structure for our blog. We have a Blog page that lists two categories (Category 1 and Category 2). Each category leads to individual posts. The RouteWithSubRoutes component helps us to create this nested structure. ✅

Quiz

That's it for today! With nested routes, you can build complex, multi-level applications in React JS. Keep learning, keep coding! 🚀