title: why component is not rendered in parent layout in react JS using react routing?
body: <p>I have two different layouts for front end and admin panel.Components for admin panel rendered correclty in admin layout but for front end it doesn't switch routes correctly and does not rendered in front end layout.
  When i don't use exact property in index.js it is even doesn't work for admin panel routes as well.
  I have consult this link as well
  <a href="https://stackoverflow.com/questions/45626214/nested-routes-not-rendering-with-react-router-v4">Nested Routes not rendering with React Router v4</a>
  but it doesn't work for me.</p>
  
  <pre><code>import Dashboard from "layouts/Dashboard/Dashboard.jsx";
  import Login from "components/FrontEnd/Login";
  import Frontend from  "layouts/Frontend/Frontend.jsx";
  import AdminLogin from  "layouts/Dashboard/AdminAuth.jsx";
  
  
  var indexRoutes = [
  
      { path: "/", name: "Frontend", component: Frontend , exactPro:true},
      { path: "/login", name: "FrontendLogin", component: Login , exactPro:false},
      { path: "/Admin", name: "Home", component: Dashboard, exactPro:false },
      { path: "/Admin-login", name: "AdminLogin", component: AdminLogin, exactPro:false}
  
  ];
  
  export default indexRoutes;
  </code></pre>
  
  <p>Index.js</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import { Router, Route, Switch } from 'react-router-dom'
  import indexRoutes from "routes/index.jsx";
  import { history } from './helper/history';
  import store from "./redux/store/index";
  import { Provider } from "react-redux";
  
  ReactDOM.render(
      &lt;Provider store={store}&gt;
          &lt;Router history={history} &gt;
              &lt;Switch&gt;
                {indexRoutes.map((prop, key) =&gt; {
                  return &lt;Route exact={prop.exactPro}  path={prop.path} component={prop.component} key={key} /&gt;;
                })}
              &lt;/Switch&gt;
          &lt;/Router&gt;
      &lt;/Provider&gt;,
    document.getElementById("root")
  );
  </code></pre>
  
  <p>.......</p>
  
  <pre><code>import Dashboard from "components/Admin/Dashboard";
  import UserProfile from "views/UserProfile/UserProfile";
  
  const dashboardRoutes = [
    {
      path: "/Admin/dashboard",
      name: "Dashboard",
      icon: "pe-7s-graph",
      component: Dashboard,
      showMenu:true,
      showMenuFront:false,
      iconImagePath:dashboardIcon,
      permission:'both'
    },
    {
      path: "/Admin/user",
      name: "User Profile",
      icon: "pe-7s-user",
      component: UserProfile,
      showMenu:false,
      showMenuFront:false,
      permission:'both'
    },
    { redirect: true, path: "/Admin", to: "/Admin/dashboard", name: "Dashboard" }
  ];
  
  export default dashboardRoutes;
  </code></pre>
  
  <p>.........</p>
  
  <pre><code>import React from 'react';
  import { Route, Redirect } from 'react-router-dom';
  
  export const AdminAuthRoute = ({ component: Component, ...rest }) =&gt; (
      &lt;Route {...rest} render={(props, matchProps) =&gt; (
          localStorage.getItem('admin-user') 
          ? &lt;Component {...props} {...matchProps} /&gt; 
          : &lt;Redirect to={{ pathname: '/Admin-login', state: { from: props.location } }} /&gt;
      )} /&gt;
  )
  </code></pre>
  
  <p>..........</p>
  
  <pre><code>import React, { Component } from "react";
  import {  Switch, Redirect } from "react-router-dom";
  import dashboardRoutes from "routes/dashboard.jsx";
  import {  AdminAuthRoute } from 'helper/PrivateRouteAdmin';
  
  class DashboardPage extends Component {
    constructor(props) {
      super(props);
    }
  
  
    render() {
  
      return (
        &lt;div className="wrapper"&gt;
          &lt;div id="main-panel" className="main-panel" ref="mainPanel"&gt;
            &lt;Switch&gt;
              {
                dashboardRoutes.map((prop, key) =&gt; {
                  console.log("prop redirect", prop.redirect);
                  if (prop.redirect){
                    return &lt;Redirect from={prop.path} to={prop.to} key={key} test="haha" /&gt;;
                  }
                  console.log('prop.path 111', prop.path);
                  return (
                    &lt;AdminAuthRoute   path={prop.path}  component={prop.component} key={key}  /&gt;
                  );
                })
              }
            &lt;/Switch&gt;
            &lt;Footer /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  
  export default Dashboard;
  </code></pre>
  
  <p>......</p>
  
  <pre><code> import Home from "components/FrontEnd/Home";
      import HowItWorks from "components/FrontEnd/HowItWorks";
      import AboutUs from "components/FrontEnd/AboutUs";
  
      const FrontEndRoutes = [
        {
          path          : "/",
          name          : "Home",
          component     : Home,
          showMenu      : true,
          number        : 1
        },
        {
          path          : "/How_It_Works",
          name          : "How it works",
          component     : HowItWorks,
          showMenu      : true,
          number        : 2
        },
        {
          path          : "/About_Us",
          name          : "About Us",
          component     : AboutUs,
          showMenu      : true,
          number        : 3
        }
      ];
  
      export default FrontEndRoutes;
  </code></pre>
  
  <p>...........</p>
  
  <pre><code>import React from 'react';
  import { Route, Redirect } from 'react-router-dom';
  
  export const FrontEndAuthRoute = ({ component: Component, ...rest }) =&gt; (
      &lt;Route {...rest} render={(props, matchProps) =&gt; (
          localStorage.getItem('music-director') 
          ? &lt;Component {...props} {...matchProps} /&gt; 
          : &lt;Redirect to={{ pathname: '/login', state: { from: props.location } }} /&gt;
      )} /&gt;
  )
  </code></pre>
  
  <p>...............</p>
  
  <pre><code>import React, { Component } from "react";
  import {  Switch, Redirect } from "react-router-dom";
  import FrontEndRoutes from "routes/FrontEndRoutes.jsx";
  import {  FrontEndAuthRoute } from 'helper/PrivateRouteFrontEnd';
  
  class Frontend extends Component {
    constructor(props) {
      super(props);
    }
    render() {
  
      return (
        &lt;div className="wrapper"&gt;
          &lt;div id="main-panel" className="main-panel" ref="mainPanel"&gt;
            &lt;Switch&gt;
              {
                FrontEndRoutes.map((prop, key) =&gt; {
                  if (prop.redirect){
                      return &lt;Redirect from={prop.path} to={prop.to} key={key} test="haha" /&gt;;
                  }
                  return (
                      &lt;FrontEndAuthRoute   path={prop.path}  component={prop.component} key={key}  /&gt;
                  );
  
                })
              }
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  export default Frontend;
  </code></pre>