title: Adding new page to reactjs template
body: <p>I am currently learning reactjs in order to create a small application<br>
  So I downloaded <a href="https://github.com/creativetimofficial/material-dashboard-react" rel="nofollow noreferrer">this template</a> from github and starting exploring it to understand how reactjs works. </p>
  
  <p>And later I wanted to create a login page under the same template
  So this what I did :<br>
  Under views I created new page Login.jsx inside Login folder<br>
  <em>path: views/Login/Login.jsx</em></p>
  
  <pre><code>import React from "react";
  import { Grid } from "material-ui";
  
  import {
    ItemGrid
  } from "components";
  
  function Login({ ...props }) {
    return (
      &lt;div&gt;
        &lt;Grid container&gt;
          &lt;ItemGrid xs={12} sm={12} md={4}&gt;
            test loginpage
          &lt;/ItemGrid&gt;
        &lt;/Grid&gt;
      &lt;/div&gt;
    );
  }
  
  export default Login;
  </code></pre>
  
  <p>and then I imported it in app.jsx and i created a new route under appRoutes</p>
  
  <p><em>path: routes/app.jsx</em></p>
  
  <pre><code>const appRoutes = [
    {
      path: "/login",
      component: LoginPage,
    },
   ....
  ]
  </code></pre>
  
  <p>and then I made this change to the main container App.jsx:<br>
  <em>path: containers/App/App.jsx</em><br>
  I created a method getLogin  </p>
  
  <pre><code>getLogin() {
    return this.props.location.pathname !== "/login";
  }
  </code></pre>
  
  <p>and I changed </p>
  
  <pre><code>&lt;Sidebar
      routes={appRoutes}
    logoText={"RecBot Cpanel"}
    logo={logo}
    image={image}
    handleDrawerToggle={this.handleDrawerToggle}
    open={this.state.mobileOpen}
    color="blue"
    {...rest}
  /&gt;
  </code></pre>
  
  <p>into this </p>
  
  <pre><code>{this.getLogin() ? (
    &lt;Sidebar
      routes={appRoutes}
      logoText={"RecBot Cpanel"}
      logo={logo}
      image={image}
      handleDrawerToggle={this.handleDrawerToggle}
      open={this.state.mobileOpen}
      color="blue"
      {...rest}
    /&gt;
  
  ) : (
      &lt;div&gt;&lt;/div&gt;
    )}
  </code></pre>
  
  <p>in order to hide the sidebar from displaying in the login page.  </p>
  
  <p>and finally when I tried to run the app the login page works fine but in any other routes I got this error:</p>
  
  <blockquote>
    <p>Element type is invalid: expected a string (for built-in components)
    or a class/function (for composite components) but got: undefined. You
    likely forgot to export your component from the file it's defined in,
    or you might have mixed up default and named imports.</p>
    
    <p>Check the render method of <code>Sidebar</code>.</p>
  </blockquote>
  
  <p>Here's the sidebar component:</p>
  
  <pre><code>import React from "react";
  import PropTypes from "prop-types";
  import { NavLink } from "react-router-dom";
  import cx from "classnames";
  import {
    withStyles,
    Drawer,
    Hidden,
    List,
    ListItem,
    ListItemIcon,
    ListItemText
  } from "material-ui";
  
  import { HeaderLinks } from "components";
  
  import sidebarStyle from "variables/styles/sidebarStyle.jsx";
  
  const Sidebar = ({ ...props }) =&gt; {
    // verifies if routeName is the one active (in browser input)
    function activeRoute(routeName) {
      return props.location.pathname.indexOf(routeName) &gt; -1 ? true : false;
    }
    const { classes, color, logo, image, logoText, routes } = props;
    var links = (
      &lt;List className={classes.list}&gt;
        {routes.map((prop, key) =&gt; {
          if (prop.redirect) return null;
          const listItemClasses = cx({
            [" " + classes[color]]: activeRoute(prop.path)
          });
          const whiteFontClasses = cx({
            [" " + classes.whiteFont]: activeRoute(prop.path)
          });
          return (
            &lt;NavLink
              to={prop.path}
              className={classes.item}
              activeClassName="active"
              key={key}
            &gt;
              &lt;ListItem button className={classes.itemLink + listItemClasses}&gt;
                &lt;ListItemIcon className={classes.itemIcon + whiteFontClasses}&gt;
                  &lt;prop.icon /&gt;
                &lt;/ListItemIcon&gt;
                &lt;ListItemText
                  primary={prop.sidebarName}
                  className={classes.itemText + whiteFontClasses}
                  disableTypography={true}
                /&gt;
              &lt;/ListItem&gt;
            &lt;/NavLink&gt;
          );
        })}
      &lt;/List&gt;
    );
    var brand = (
      &lt;div className={classes.logo}&gt;
        &lt;a href="https://www.creative-tim.com" className={classes.logoLink}&gt;
          &lt;div className={classes.logoImage}&gt;
            &lt;img src={logo} alt="logo" className={classes.img} /&gt;
          &lt;/div&gt;
          {logoText}
        &lt;/a&gt;
      &lt;/div&gt;
    );
    return (
      &lt;div&gt;
        &lt;Hidden mdUp&gt;
          &lt;Drawer
            variant="temporary"
            anchor="right"
            open={props.open}
            classes={{
              paper: classes.drawerPaper
            }}
            onClose={props.handleDrawerToggle}
            ModalProps={{
              keepMounted: true // Better open performance on mobile.
            }}
          &gt;
            {brand}
            &lt;div className={classes.sidebarWrapper}&gt;
              &lt;HeaderLinks /&gt;
              {links}
            &lt;/div&gt;
            {image !== undefined ? (
              &lt;div
                className={classes.background}
                style={{ backgroundImage: "url(" + image + ")" }}
              /&gt;
            ) : null}
          &lt;/Drawer&gt;
        &lt;/Hidden&gt;
        &lt;Hidden smDown&gt;
          &lt;Drawer
            anchor="left"
            variant="permanent"
            open
            classes={{
              paper: classes.drawerPaper
            }}
          &gt;
            {brand}
            &lt;div className={classes.sidebarWrapper}&gt;{links}&lt;/div&gt;
            {image !== undefined ? (
              &lt;div
                className={classes.background}
                style={{ backgroundImage: "url(" + image + ")" }}
              /&gt;
            ) : null}
          &lt;/Drawer&gt;
        &lt;/Hidden&gt;
      &lt;/div&gt;
    );
  };
  
  Sidebar.propTypes = {
    classes: PropTypes.object.isRequired
  };
  
  export default withStyles(sidebarStyle)(Sidebar);
  </code></pre>
  
  <p>what did i do wrong ?</p>