How can I Dynamically switch a component into another page using

Please help me out with this as I am learning on my own. I have a list of shops rendering using .map, now I want to render the shops that users click on. I have my BarberShops imported and tried to use Link from React-Router to go to the next page on my barberShopHandler, but didn’t work. on my shopList component I have :

import React, { Component } from "react";

import "../List.css";

class ShopList extends Component {
  render() {
    return (
      <div className="list-item">
        <div className="listing" onClick={this.props.click}>
          <div className="listing-main">
            <h3 className="listing-title">{this.props.shop}</h3>
            <p className="listing-subtitle">{this.props.address}</p>
            <p className="listing-opening-hours"> {this.props.operation}</p>
          </div>
        </div>
      </div>
    );
  }
}
export default ShopList;

on my List component I have :

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

import "./List.css";
import Footer from "../../components/Footer";
import Map from "./Map/Map";
import ShopList from "./components/ShopList";
// import BarberShop1 from "../barberShop/BarberShop1";
// import BarberShop2 from "../barberShop/BarberShop2";

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      shops: [
        {
          id: "0",
          shopName: " my shop name",
          address: "my shop address",
          operatingHour: "Open (9:00 - 20:00)",
        },
        {
          id: "1",
          shopName: " my shop name",
          address: " my shop address",
          operatingHour: "Open (10:00 - 20:00)",
        },
      ],
    };
  }

  barberShopHandler = (index) => {
    const shops = this.state.shops;
    if (index === shops[0].id) {
       **<Link to="/barbershop1">
          <BarberShop1 />
        </Link>;** ***which didnt work***
      console.log(shops[0].id);
    } else if (index === shops[1].id) {
      console.log(shops[1].id);
    }
  };

  render() {
    const shops = this.state.shops;
    return (
      <div>
        <Map />
        <Footer />
        <div className="list-wrapper" style={{ transform: `translateY(1px)` }}>
          {shops.map((shop, index) => {
            return (
              <ShopList
                key={shop.id}
                shop={shop.shopName}
                address={shop.address}
                operation={shop.operatingHour}
                click={() => this.barberShopHandler(index)}
              ></ShopList>
            );
          })}
        </div>
        <div className="list-refresh">
          <button className="refresh-button"></button>
        </div>
      </div>
    );
  }
}
export default List;


**update ** and my router file

import React, { lazy, Suspense } from "react";

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";

const Login = lazy(() => import("./pages/login/Login"));
const List = lazy(() => import("./pages/list/List"));
const BarberShop1 = lazy(() => import("./pages/barberShop/BarberShop1"));
const BarberShop2 = lazy(() => import("./pages/barberShop/BarberShop2"));

export default function Routes() {
  return (
    <Router>
      <Switch>
        <Suspense fallback={<div>Loading...</div>}>
          <Redirect from="/" to="/login" />
          <Route path="/list" component={List} />
          <Route path="/barbershop1" component={BarberShop1} />
          <Route path="/barbershop2" component={BarberShop2} />
        </Suspense>
      </Switch>
    </Router>
  );
}

I want to render BarberShop1 or BarberShop2 depending on what user click on

Answer

The Link is use to create links. It cannot be used after you click to send somewhere..

You could use the history prop passed from the router to the List component

  barberShopHandler = (index) => {
    const shops = this.state.shops;
    if (index === shops[0].id) {
      this.props.history.push("/barbershop1");
    } else if (index === shops[1].id) {
      this.props.history.push("/barbershop2");
    }
  };

But a cleaner / more extensible way would be to add the url of each shop to its object and then use the Link in the ShopList

So in List component

this.state = {
  shops: [
    {
      id: "0",
      shopName: " my shop name",
      address: "my shop address",
      operatingHour: "Open (9:00 - 20:00)",
      link: '/barbershop1'
    },
    {
      id: "1",
      shopName: " my shop name",
      address: " my shop address",
      operatingHour: "Open (10:00 - 20:00)",
      link: '/barbershop2'
    },
  ],
};

and

     {shops.map((shop, index) => {
        return (
          <ShopList
            key={shop.id}
            shop={shop.shopName}
            address={shop.address}
            operation={shop.operatingHour}
            link={shop.link}
          ></ShopList>
        );
      })}

and in ShopList

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

import "../List.css";

class ShopList extends Component {
  render() {
    return (
      <div className="list-item">
        <Link to={this.props.link} className="listing" onClick={this.props.click}>
          <div className="listing-main">
            <h3 className="listing-title">{this.props.shop}</h3>
            <p className="listing-subtitle">{this.props.address}</p>
            <p className="listing-opening-hours"> {this.props.operation}</p>
          </div>
        </Link>
      </div>
    );
  }
}
export default ShopList;