fix(routes): fix child routes rendering issue

project-cssi · Apr 18, 2019 · 196a617 · 196a617
1 parent bc55612
commit 196a617
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 34 deletions.
diff --git a/src/containers/app.jsx b/src/containers/app.jsx
@@ -1,18 +1,21 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import {
   Switch,
   Route,
 } from 'react-router-dom';
-import { AppRoutes } from '../routes';
+import {AppRoutes} from '../routes';
 
 class App extends Component {
   render() {
     return (
       <Switch>
         {
-          AppRoutes.map((prop, key) => (
-            <Route path={prop.path} component={prop.component} key={key} />
-          ))
+          AppRoutes.map((prop, key) => {
+            if (prop.exact) {
+              return <Route path={prop.path} component={prop.component} key={key} exact/>
+            }
+            return <Route path={prop.path} component={prop.component} key={key}/>
+          })
         }
       </Switch>
     );

diff --git a/src/containers/auth.jsx b/src/containers/auth.jsx
@@ -1,11 +1,11 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {
   Switch,
   Route,
 } from 'react-router-dom';
-import { connect } from 'react-redux';
-import { AuthRoutes } from '../routes';
+import {connect} from 'react-redux';
+import {AuthRoutes} from '../routes';
 import {
   MainLoaderSpinner,
   Notifications,
@@ -19,7 +19,7 @@ class Auth extends Component {
   }
 
   getPageClass() {
-    const { location } = this.props;
+    const {location} = this.props;
     let pageClass = '';
     if (location.pathname === '/login') {
       pageClass = ' login-page';
@@ -30,22 +30,25 @@ class Auth extends Component {
   }
 
   render() {
-    const { loaderStatus } = this.props;
+    const {loaderStatus} = this.props;
     return (
       <div className="wrapper wrapper-full-page">
-        <Notifications />
-        <MainLoaderSpinner active={loaderStatus} type="ball-beat" />
+        <Notifications/>
+        <MainLoaderSpinner active={loaderStatus} type="ball-beat"/>
         <div className={`full-page${this.getPageClass()}`} data-color="white">
           <div className="content">
             <Switch>
               {
-                AuthRoutes.map((prop, key) => (
-                  <Route path={prop.path} component={prop.component} key={key} />
-                ))
+                AuthRoutes.map((prop, key) => {
+                  if (prop.exact) {
+                    return <Route path={prop.path} component={prop.component} key={key} exact/>
+                  }
+                  return <Route path={prop.path} component={prop.component} key={key}/>
+                })
               }
             </Switch>
           </div>
-          <div className="full-page-background" />
+          <div className="full-page-background"/>
         </div>
       </div>
     );

diff --git a/src/containers/dashboard.jsx b/src/containers/dashboard.jsx
@@ -1,14 +1,14 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {
   Switch,
   Route,
   Redirect,
 } from 'react-router-dom';
 import _ from 'lodash';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
-import { DashboardRoutes } from '../routes';
+import {bindActionCreators} from 'redux';
+import {connect} from 'react-redux';
+import {DashboardRoutes} from '../routes';
 import * as userActionCreators from '../redux/actions/user-actions';
 import {
   MainLoaderSpinner,
@@ -18,53 +18,76 @@ import {
   Footer,
   Restricted,
 } from '../components';
-import { getCookie, validateCookie } from '../services';
-import { canActivate } from '../utils';
+import {getCookie, validateCookie} from '../services';
+import {canActivate} from '../utils';
 
 class Dashboard extends Component {
   componentDidMount() {
-    const { actions } = this.props;
+    const {actions} = this.props;
     if (validateCookie()) {
       actions.users.setLoggedInUser(getCookie().username);
       actions.users.setLoggedInUserUsername(getCookie().username);
     }
   }
 
   render() {
-    const { loaderStatus, loggedInUser } = this.props;
+    const {loaderStatus, loggedInUser} = this.props;
     return (
       <div className="wrapper">
-        <Notifications />
-        <MainLoaderSpinner active={loaderStatus} type="ball-beat" />
+        <Notifications/>
+        <MainLoaderSpinner active={loaderStatus} type="ball-beat"/>
         <Sidebar {...this.props} />
         <div className="main-panel" ref="mainPanel">
           <Header {...this.props} />
           <Switch>
             {
               DashboardRoutes.map((prop, key) => {
                 if (prop.collapse) {
-                  return prop.views.map((innerProp, key) => (
-                    <Route
+                  return prop.views.map((innerProp, key) => {
+                    if(prop.exact) {
+                      return (<Route
+                        path={prop.path}
+                        render={() => (canActivate(loggedInUser, prop.restrictionLevel)
+                          ? <prop.component {...this.props} />
+                          : <Restricted/>)}
+                        key={key}
+                        exact
+                      />);
+                    }
+                    return (<Route
                       path={prop.path}
                       render={() => (canActivate(loggedInUser, prop.restrictionLevel)
                         ? <prop.component {...this.props} />
-                        : <Restricted />)}
+                        : <Restricted/>)}
                       key={key}
-                    />
-                  ));
+                    />);
+                  });
                 }
                 if (prop.redirect) {
                   return (
-                    <Redirect from={prop.path} to={prop.pathTo} key={key} />
+                    <Redirect from={prop.path} to={prop.pathTo} key={key}/>
+                  );
+                }
+                if (prop.exact) {
+                  return (
+                    <Route
+                      path={prop.path}
+                      render={() => (canActivate(loggedInUser, prop.restrictionLevel)
+                        ? <prop.component {...this.props} />
+                        : <Restricted/>)
+                      }
+                      key={key}
+                      exact
+                    />
                   );
                 }
                 return (
                   <Route
                     path={prop.path}
                     render={() => (canActivate(loggedInUser, prop.restrictionLevel)
                       ? <prop.component {...this.props} />
-                      : <Restricted />)
-                  }
+                      : <Restricted/>)
+                    }
                     key={key}
                   />
                 );