javascript - 添加新页面到reactjs模板

Question

我目前正在学习reactjs以创建一个小型应用程序
所以我下载了this template来自github并开始探索它以了解reactjs是如何工作的。

后来我想在同一个模板下创建一个登录页面这就是我所做的:
在 View 下，我在 Login 文件夹中创建了新页面 Login.jsx
路径:views/Login/Login.jsx

import React from "react";
import { Grid } from "material-ui";

import {
  ItemGrid
} from "components";

function Login({ ...props }) {
  return (
    <div>
      <Grid container>
        <ItemGrid xs={12} sm={12} md={4}>
          test loginpage
        </ItemGrid>
      </Grid>
    </div>
  );
}

export default Login;

然后我将其导入到 app.jsx 中，并在 appRoutes 下创建了一条新路线

路径:routes/app.jsx

const appRoutes = [
  {
    path: "/login",
    component: LoginPage,
  },
 ....
]

然后我对主容器 App.jsx 进行了此更改:
路径:containers/App/App.jsx
我创建了一个方法 getLogin

getLogin() {
  return this.props.location.pathname !== "/login";
}

我改变了

<Sidebar
    routes={appRoutes}
  logoText={"RecBot Cpanel"}
  logo={logo}
  image={image}
  handleDrawerToggle={this.handleDrawerToggle}
  open={this.state.mobileOpen}
  color="blue"
  {...rest}
/>

进入此

{this.getLogin() ? (
  <Sidebar
    routes={appRoutes}
    logoText={"RecBot Cpanel"}
    logo={logo}
    image={image}
    handleDrawerToggle={this.handleDrawerToggle}
    open={this.state.mobileOpen}
    color="blue"
    {...rest}
  />

) : (
    <div></div>
  )}

为了隐藏侧边栏，使其不显示在登录页面中。

最后，当我尝试运行该应用程序时，登录页面工作正常，但在任何其他 route 我收到此错误:

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.

Check the render method of Sidebar.

这是侧边栏组件:

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 }) => {
  // verifies if routeName is the one active (in browser input)
  function activeRoute(routeName) {
    return props.location.pathname.indexOf(routeName) > -1 ? true : false;
  }
  const { classes, color, logo, image, logoText, routes } = props;
  var links = (
    <List className={classes.list}>
      {routes.map((prop, key) => {
        if (prop.redirect) return null;
        const listItemClasses = cx({
          [" " + classes[color]]: activeRoute(prop.path)
        });
        const whiteFontClasses = cx({
          [" " + classes.whiteFont]: activeRoute(prop.path)
        });
        return (
          <NavLink
            to={prop.path}
            className={classes.item}
            activeClassName="active"
            key={key}
          >
            <ListItem button className={classes.itemLink + listItemClasses}>
              <ListItemIcon className={classes.itemIcon + whiteFontClasses}>
                <prop.icon />
              </ListItemIcon>
              <ListItemText
                primary={prop.sidebarName}
                className={classes.itemText + whiteFontClasses}
                disableTypography={true}
              />
            </ListItem>
          </NavLink>
        );
      })}
    </List>
  );
  var brand = (
    <div className={classes.logo}>
      <a href="https://www.creative-tim.com" className={classes.logoLink}>
        <div className={classes.logoImage}>
          <img src={logo} alt="logo" className={classes.img} />
        </div>
        {logoText}
      </a>
    </div>
  );
  return (
    <div>
      <Hidden mdUp>
        <Drawer
          variant="temporary"
          anchor="right"
          open={props.open}
          classes={{
            paper: classes.drawerPaper
          }}
          onClose={props.handleDrawerToggle}
          ModalProps={{
            keepMounted: true // Better open performance on mobile.
          }}
        >
          {brand}
          <div className={classes.sidebarWrapper}>
            <HeaderLinks />
            {links}
          </div>
          {image !== undefined ? (
            <div
              className={classes.background}
              style={{ backgroundImage: "url(" + image + ")" }}
            />
          ) : null}
        </Drawer>
      </Hidden>
      <Hidden smDown>
        <Drawer
          anchor="left"
          variant="permanent"
          open
          classes={{
            paper: classes.drawerPaper
          }}
        >
          {brand}
          <div className={classes.sidebarWrapper}>{links}</div>
          {image !== undefined ? (
            <div
              className={classes.background}
              style={{ backgroundImage: "url(" + image + ")" }}
            />
          ) : null}
        </Drawer>
      </Hidden>
    </div>
  );
};

Sidebar.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(sidebarStyle)(Sidebar);

我做错了什么？

Answer 1

您需要做的是检查 icon 是否存在于您的 prop 对象中

{prop.icon && <prop.icon />}

通过这种方式，您可以保留图标(如果存在)，如果不存在则可以避免错误。

你可以看到这个page了解有关 React 中条件渲染的更多信息。