App.js =>

import React, { Component } from "react";

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

import HomeLayout from "./uk_component/layout/HomeLayout";
import ProductLayout from "./uk_component/layout/ProductLayout";
import UserProfileLayout from "./uk_component/layout/UserProfileLayout";

import Home from "./uk_component/Home";
import Product from "./uk_component/Product";
import Userprofile from "./uk_component/Userprofile";




import './css/ukstyle.css';


const HomeLayoutRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest} exact
      render={matchProps => (
        <HomeLayout>
          <Component {...matchProps} />
        </HomeLayout> 
      )}
    />
  );
};

const ProductLayoutRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest} exact
      render={matchProps => (
        <ProductLayout>
          <Component {...matchProps} />
        </ProductLayout>
      )}
    />
  );
};



const UserProfileLayoutRoute = ({ component: Component, ...rest }) => {

    return (
        <Route
            {...rest} exact
            render={matchProps => (
                <UserProfileLayout>
                    <Component {...matchProps} />
                </UserProfileLayout>
            )}
        />
    );
};

class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <Switch>
            <Route exact path="/">
            <Redirect to="/home" />
            </Route>
            <HomeLayoutRoute path="/home" component={Home}   />
            <ProductLayoutRoute path="/product/:cat_metaname" component={Product}/>
            <UserProfileLayoutRoute path="/profile" component={Userprofile} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

HomeLayout.js =>


import React, {Component} from "react";
import {Container,Row,Col} from "react-bootstrap";
import LogoBlock from "../../uk_component/template/Logo";
import LoginInfo from "../../uk_component/template/Logininfo";
import TopSearch from "../../uk_component/template/top_search";
import TopMenu from "../template/TopMenu";
import LandingBanner from "../../uk_component/template/landing_banner";
import MenWomenCollection from "../../uk_component/template/MenWomenCollection";
import PelloHomeCollection from "../../uk_component/template/PelloHomeCollection";
import Footer from "../../uk_component/template/footer";
import LandingInfo from '../../uk_component/template/LandingInfo'
import Mainmenu from "../template/Mainmenu";
import Language from "../template/Language";
import Cartlist from '../../uk_component/template/Cartlist';



//import 'jquery/dist/jquery.js';
//import 'popper.js/dist/umd/popper.js';
import '../../css/Landing.css';


class HomeLayout extends Component{
	constructor() {
		super();
		this.state={
			isCartOnOff:false
		}
	}

	cartHandlee(){
		this.setState({isCartOnOff:!this.state.isCartOnOff});
		//alert(this.state.isCartOnOff);
	}


	render() {
		return (
			<Container fluid>
				<div className="wrapper">
					<Row>
						<Col xs={12} sm={12} md={12} lg={12} xl={12} className="p-0">
							<div className="transparent-header-background">
								<div className="top-area top-area-style-default top-area-alignment ukfloatleft">
								</div>
							</div>
						</Col>
					</Row>
					<Row>
						<Col xs={12} sm={12} md={12} lg={12} xl={12} className="p-0 logobarbg">
							<div className="ukmcontainer p-0">
								<Row>
									<LogoBlock/>
									<LoginInfo/>
									<TopSearch/>
									<Language/>
									<TopMenu click={this.cartHandlee.bind(this)}/>
								</Row>
							</div>

						</Col>
					</Row>
					<Row>
						<Col xs={12} sm={12} md={12} lg={12} xl={12} className="p-0">
							<Mainmenu/>
							<div className="cls"></div>
						</Col>
					</Row>

					<Row>
						<Col xs={12} sm={12} md={12} lg={12} xl={12} className="p-0 noSearch">
							<LandingBanner/>
						</Col>
					</Row>
					<Row>
						<Col xs={12} sm={12} md={12} lg={12} xl={12} className="p-0 noSearch">
							<LandingInfo/>
						</Col>
					</Row>


					<Row>
						<Col xs={12} sm={12} md={12} lg={12} xl={12} className="p-0 noSearch">
							<div className="ukmcontainer paddingtopBottom25 nopadding5">
								<MenWomenCollection/>
								<PelloHomeCollection/>
								{/*children*/}
							</div>
						</Col>
					</Row>


					<Row>
						<Col xs={12} sm={12} md={12} lg={12} xl={12} className="p-0 noSearch">
							<div className="cls"></div>
							<div className="footer-bottom">
								<Footer/>
							</div>
						</Col>
					</Row>
					<Cartlist isCart={this.state.isCartOnOff}/>

				</div>
			</Container>
		);
	}
}
 
export default HomeLayout;

Mainmenu.js =>

import React, { Component } from "react";
import {Link} from "react-router-dom";
import {Navbar,Nav,NavDropdown} from "react-bootstrap";
import SubMenu from './SubMenu';
import '../../css/Mainmenu.css';
import '../../i18n' ;
import {useTranslation} from "react-i18next";

class Mainmenu extends Component {

  render() {

	  const MainMenuArray =[
		  {title:'Home','title_bn':'বাড়ি',link:'/home'},
		  {title:'Product','title_bn':'পণ্য',link:'/product/women'},
		  {title:'Women',link:'/product/women_one',sub:[
				  {title:'Women One',link:'/product/women_two'},
				  {title:'Women Two',link:'/product/men2'},
				  {title:'Women Three',link:'/product/men3'},
				  {title:'Women Four',link:'/product/men4'}
			  ]

		  }
	  ];

	  const MenuText =()=> {
		  const { t} = useTranslation();
		  return (
		  	<>
				<Navbar collapseOnSelect expand="lg" bg="white" variant="light" className="p-0">
					<div className="ukmcontainer p-0">
						<Navbar.Toggle aria-controls="responsive-navbar-nav" />
						<Navbar.Collapse id="responsive-navbar-nav">
							<Nav className="mr-auto">
								{MainMenuArray.map((menuLink,index)=>{
									if(menuLink.sub){
										return(
											<NavDropdown className="pt-2 pr-4 pb-3 pl-0" title={menuLink.title} id="collasible-nav-dropdown" key={index}>
												<SubMenu submenu={menuLink.sub}/>
											</NavDropdown>
										)
									}else{
										return(
											<Link to={menuLink.link} className="pt-3 pr-4 pb-3 pl-0" key={index}>{(localStorage.getItem('i18nextLng')==="bn")? menuLink.title_bn:menuLink.title}</Link>

										)
									}

								})}
							</Nav>
						</Navbar.Collapse>
					</div>
				</Navbar>
			</>
		  );
	  }

    return (
      <MenuText />
    );
  }
}
 
export default Mainmenu;

SubMenu.js =>

import React, { Component } from "react";
import {Link} from 'react-router-dom';
import '../../css/Mainmenu.css';

class SubMenu extends Component {

  render() {
    return (
        <div className="ukMega">
            {this.props.submenu.map((eachSubmenu,index)=>{
            return(  
                    <Link to={eachSubmenu.link} className="dropdown-item"  key={index}>{eachSubmenu.title}</Link>
                )
        })}
        </div>
    );
  }
}
 
export default SubMenu;