“Nested Components with Child Routes in React”-(React No-14)

In React, child routing (also known as nested routing) allows you to render nested components within parent components using React Router. This is helpful when you want to create complex layouts where certain routes depend on others, such as a dashboard with different sections or a user profile with tabs.

Setting Up Child Routes in React

Here’s how you can set up child routing in React using React Router:

1. Install React Router

First, ensure that you have React Router installed in your project:

npm install react-router-dom

2. Create Main and Child Components

Suppose you have a Dashboard component as the main component and Overview and Settings as child components:

• Dashboard (Main Component)
• Overview (Child Component)
• Settings (Child Component)

Create these components:

// Dashboard.js
import React from 'react';
import { Outlet, Link } from 'react-router-dom';

const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <Link to="overview">Overview</Link> | <Link to="settings">Settings</Link>
      </nav>
      {/* Render child routes here */}
      <Outlet />
    </div>
  );
};

export default Dashboard;

// Overview.js
import React from 'react';

const Overview = () => {
  return <div>Overview Page</div>;
};

export default Overview;

// Settings.js
import React from 'react';

const Settings = () => {
  return <div>Settings Page</div>;
};

export default Settings;

3. Define Routes in App

In your App.js (or wherever you define your routes), set up the parent and child routes using React Router's Route and Outlet components:

// App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Dashboard from './Dashboard';
import Overview from './Overview';
import Settings from './Settings';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<h1>Home Page</h1>} />
        <Route path="dashboard" element={<Dashboard />}>
          {/* Define child routes */}
          <Route path="overview" element={<Overview />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </Router>
  );
};

export default App;

Explanation

• Parent Route (/dashboard): This is the Dashboard component. It contains the <Outlet /> component, which acts as a placeholder for rendering child routes.
• Child Routes (/dashboard/overview and /dashboard/settings): Defined using the Route component nested within the Dashboard route. These routes render the Overview and Settings components within the Dashboard component.
• Navigation: Within the Dashboard component, the Link components are used to navigate to the child routes.

4. Using the Outlet Component

The Outlet component is essential for rendering child routes within the parent component. It serves as a placeholder for where the child component should be rendered.

5. Resulting Structure

Now the application will have the following route structure:

• /dashboard - Displays the Dashboard component
• /dashboard/overview - Displays the Overview component within the Dashboard
• /dashboard/settings - Displays the Settings component within the Dashboard

Example File Structure

Your project file structure might look like this:

src
├── App.js
├── Dashboard.js
├── Overview.js
├── Settings.js

Full Example Code

Here’s a consolidated version of the code:

// Dashboard.js
import React from 'react';
import { Outlet, Link } from 'react-router-dom';

const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <Link to="overview">Overview</Link> | <Link to="settings">Settings</Link>
      </nav>
      {/* Render child routes here */}
      <Outlet />
    </div>
  );
};

export default Dashboard;

// Overview.js
import React from 'react';

const Overview = () => {
  return <div>Overview Page</div>;
};

export default Overview;

// Settings.js
import React from 'react';

const Settings = () => {
  return <div>Settings Page</div>;
};

export default Settings;

// App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Dashboard from './Dashboard';
import Overview from './Overview';
import Settings from './Settings';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<h1>Home Page</h1>} />
        <Route path="dashboard" element={<Dashboard />}>
          {/* Define child routes */}
          <Route path="overview" element={<Overview />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </Router>
  );
};

export default App;

Summary

• Define nested routes using the Route component inside the parent route.
• Use the Outlet component in the parent component to render child routes.
• Use Link for navigation to child routes within the parent component.

This approach allows you to create complex and nested navigation structures within your React application.