Question

我有一个PrivateRoute组件，尝试按如下方式呈现Component：

＆＃13;

import React, { Component } from 'react';
import { Route, Redirect } from 'react-router-dom';
const PrivateRoute = ({ component, loggedIn, ...rest }) => (
    <Route
        {...rest}
        render={props =>
            loggedIn ? (
                <Component {...props} />
            ) : (
                <Redirect
                    to={{ pathname: '/login', state: { from: props.location } }}
                />
            )}
    />
);

export default PrivateRoute;

＆＃13;

我使用这个组件：

＆＃13;

<PrivateRoute loggedIn={!!token} path="/user" component={User} />

＆＃13;

它给出了标题错误。我想知道哪里出错了？

提前谢谢。

Answer 1

您已将传递给PrivateRoute的组件解压缩为component：

const PrivateRoute = ({ component, loggedIn, ...rest }) => (
                        // HERE ^

但随后您使用从Component导入的C（请注意大写react）来呈现它。

<Component {...props} />

导入的Component没有任何render方法。因此你得到的错误。

要解决此问题，您需要重命名解压缩的component，如下所示：

const PrivateRoute = ({ component: Comp, loggedIn, ...rest }) => (
                              // HERE ^
  <Route
    {...rest}
    render={props =>
      loggedIn ? (
        <Comp {...props} />
    // HERE ^
      ) : (
        <Redirect
          to={{ pathname: "/login", state: { from: props.location } }}
        />
      )
    }
  />
);

提供inst.render的组件（由Route创建）不是函数错误

1 个答案: