CODEWITHSUNDEEP
reactjsreact-typescript
user2024080
user2024080

Reputation: 5101

How to load the child component under the parent component

In react I am using tsx file. where how to load the child component under the parent component?

here is my products page:

import React from "react";
import {
  Link,
  Route,
  Switch,
  useRouteMatch,
  useParams
} from "react-router-dom";

import "./products.scss";

const Shoes = React.lazy(() => import("./shoes/shoes.component"));
const Cloths = React.lazy(() => import("./cloths/cloths.component"));

export default class Products extends React.Component {
  render() {
    return (
      <>
        <header>
          <Link to="/shoe">Shoes</Link>
          <Link to="/cloths">Cloths</Link>
        </header>
        <h1>Products page</h1>;
        <main>
          <h2>Subpage goes here </h2>
          <p>sub pages should load here </p>
        </main>
      </>
    );
  }
}

on click of the child Link, i looking to load them in to main element.

Live Demo

Upvotes: 0

Views: 467

Answers (1)

Nilesh Patel
Nilesh Patel

Reputation: 3317

Please check docs for more information

   <div>
      <header>
        <Link to="/products/shoe">Shoes</Link>
        <Link to="/products/cloths">Cloths</Link>
      </header>
      <h1>Products page</h1>
      <Route path={`/products/shoe`}>
        <Shoes />
      </Route>
      <Route path={`/products/cloths`}>
        <Cloths />
      </Route>
    </div>

demo

Upvotes: 1

Related Questions