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;

ProductLayout.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 InnerBanner from "../../uk_component/template/InnerBanner";
import BreadcrumbLink from "../../uk_component/template/BreadcrumbLink";
import FrontLeftmenu from "../template/FrontLeftmenu";
import Footer from "../../uk_component/template/footer";
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';


class ProductLayout extends Component {
	constructor(props) {
		super(props);
		this.state={
			isCartOnOff:false,
		}
        //console.warn("productlayout",this.props.children.props.match.params.cat_metaname);
		//console.warn("productlayout",this.state.cat_meta_name);


	}

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

	loadOnBagItem(){
		this.setState({totalInBagItem:0});
	}


	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)}   onLoad={this.loadOnBagItem.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">
							
						</Col>
					</Row>

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


					<Row>
						<Col xs={12} sm={12} md={12} lg={12} xl={12} className="p-0 noSearch">
							<div className="ukmcontainer paddingtopBottom25 nopadding5">
								<Row>
								<Col xs={12} sm={12} md={3} lg={2} xl={2}  className="nopadding5">
									<FrontLeftmenu cat_meta_name={this.props.children.props.match.params.cat_metaname} key={Math.random()} />
								</Col>
								<Col xs={12} sm={12} md={9} lg={10} xl={10}  className="nopadding5 noSearch">
									{this.props.children}
								</Col>
								</Row>
							</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 ProductLayout;

UserProfileLayout.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 FrontLeftmenu from "../template/FrontLeftmenu";
import Footer from "../../uk_component/template/footer";
import Mainmenu from "../template/Mainmenu";
import Language from "../template/Language";



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


class UserProfileLayoutLayout extends Component {

	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/>
								</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">
							<div className="ukmcontainer paddingtopBottom25 nopadding5">
								<div className="col-xs-12 col-sm-3 col-md-2 col-lg-2 nopadding5">
									<FrontLeftmenu/>
								</div>
								<div className="col-xs-12 col-sm-9 col-md-10 col-lg-10 nopadding5 noSearch">
									{this.props.children}
								</div>
							</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>
				</div>
			</Container>
		);
	}
}
 
export default UserProfileLayoutLayout;

Home.js =>

import React from "react";
const Home = () => {
    return (        
     <div>
         <h5>Welcome Home</h5>
     </div>
    );
}
export default Home;

Product.js =>

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

import '../css/Product.css';



class Product extends Component{
    constructor(props) {
        super(props);
        this.state={
            cat_meta_name:this.props.match.params.cat_metaname
        }
        //console.warn("my product",this.props.match.params.cat_metaname);

    }

    render(){

        const ProductCategory =[
            {cat_meta_name:'women',title:"Women Top",link:'294-top',src:'https://www.qriusbd.com/public/images/upload/category/adff1558354b212d0e0c5e306d5f2bce.jpg'},
            {cat_meta_name:'women',title:"Women Sary",link:'294-tunic',src:'https://www.qriusbd.com/public/images/upload/category/4d1b8ee2344eaf61a0a8b97eff982801.jpg'},
            {cat_meta_name:'women',title:"Women Churidar",link:'294-tunic',src:'https://www.qriusbd.com/public/images/upload/category/55a79e24806876d5c3ca60229890da65.jpg'},
            {cat_meta_name:'women',title:"Women Scart",link:'294-tunic',src:'https://www.qriusbd.com/public/images/upload/category/dd7b3c10cb0e63c9b060fce7d565ef5b.jpg'},
            {cat_meta_name:'women_two',title:"Women Jamdani",link:'294-tunic',src:'https://www.qriusbd.com/public/images/upload/category/45bce23313e7fdb156183e363bc19555.jpg'},
            {cat_meta_name:'women_two',title:"Women Bottom",link:'294-tunic',src:'https://www.qriusbd.com/public/images/upload/category/1631b815893f2bf36875d62885a2137b.jpg'}
        ]

        const CategoryArray =ProductCategory.map((categoryItem,key)=>{
            return(
                categoryItem.cat_meta_name===this.props.match.params.cat_metaname?
                <div key={key}>
                    <div className="quickfinder-item-link_ukm2">
                        <Link to={categoryItem.link} key={key}>
                            <div className="vc_custom_child_cat2_">
                                 <div className="quickfinder-item-info2">
                                     <img className="catImage" src={categoryItem.src} alt="ukImg" />
                                     <div className="quickfinder-item-title2">
                                         {categoryItem.cat_meta_name}
                                     </div>
                                 </div>
                            </div>
                        </Link>
                    </div>
                </div>
                    :""
                );
        });

        const MyFunctionOne =()=>{
            return(<div>
                {CategoryArray}
            </div>);
        }

        const ProductList =[
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-top","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A004687-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-tunic","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A003305-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-tunic","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A003305-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-tunic","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A003305-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-tunic","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A003305-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-tunic","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A003305-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-tunic","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A003305-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-tunic","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A003305-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-tunic","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A003305-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-tunic","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A003305-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-tunic","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A003305-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-tunic","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A003305-1_medium.jpg"},
            {"meta_name":"A004687-q-now-tops-occur-yellow","title_en":"Ochre crepe viscose top","title_bn":"Ochre crepe viscose top","cat_meta_name":"294-tunic","price":"500","price_unit":"TK","img_url":"https://www.qriusbd.com/public/images/upload/product/A003305-1_medium.jpg"},

        ]

        const ShowProduct = ProductList.map((product,pItem)=>{
             return(
                  (product.cat_meta_name===this.props.match.params.cat_metaname)?
                      <Col xs={12} sm={4} md={4} lg={3} key={pItem}>
                          <div className="ukmproductborder productwidth">
                              <Link to="#" className="product-image">
                                  <div>
                                      <img className="hoverimage" src={product.img_url} />
                                  </div>

                              </Link>
                              <div className="cls"></div>
                              <div className="product-info clearfix" align="cener">
                                  <div className="productTitle">
                                      {product.title_en}
                                  </div>
                                  <div className="productPrice">
                                      {product.price_unit} {product.price} <button className="addToCart"><i className="fa fa-shopping-cart"></i></button>
                                  </div>

                              </div>
                          </div>

                      </Col>
                  :""
             );
        })

        return(
            <>
                <Row>
                    <Col xs={12} sm={12} md={12} lg={12}>
                            
                    </Col>
                </Row>
              <Row>
                  <Col xs={12} sm={12} md={12} lg={12}>
                      <Row>
                          {ShowProduct}
                      </Row>
                  </Col>
              </Row>
            </>
        );
    }
}
 
export default Product;

UserProfile.js =>


import React from "react";
import {Redirect} from 'react-router-dom';
 
const Userprofile = (props) => {
    if(localStorage.getItem("auth")){
        return<>User Profile;
    }else{
        return <>{<Redirect to="/home"/>}</>;
    }
}
 
export default Userprofile;