Question

我收到此错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者可能混淆了默认导入和命名导入

点击此链接时：

<li><NavLink activeClassName="active" to={{pathname: '/add-new'}}>Add new Recipe</NavLink>{' '} </li>

我的路线如下：

<PrivateRoute 
  exact 
  path='/add-new' 
  render={(props) => 
    <NewRecipe 
      {...props} 
      addRecipe={this.addRecipe}/>
  } 
  authenticated={authenticated} 
/>

PrivateRoute.js看起来像这样：

import React from "react";
import { Route, Redirect } from "react-router-dom";

export default function PrivateRoute({
  component: Component,
  authenticated,
  ...rest
}) {
  console.log(...rest);
  return (
    <Route
      {...rest}
      render={props =>
        authenticated === true ? (
          <Component {...props} {...rest} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
}

由于我需要传递函数，因此从Component={NewRecipe}切换到Render={...}时发生了错误。

Answer 1

PrivateRoute跳过了render道具（而不是调用它），修复可能是这样的（注意render()逻辑）：

export default function PrivateRoute({
  component: Component,
  authenticated,
  render,
  ...rest
}) {
return (
    <Route
      {...rest}
      render={props =>
        authenticated === true ? (
          render ? render(props) : <Component {...props} {...rest} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );

有点复杂，但是我希望可以帮助您了解如何捕获render道具的想法。

其他解决方案是更改/add-new作为组件传递：

  <PrivateRoute 
    exact 
    path='/add-new' 
    addRecipe={this.addRecipe}
    component={NewRecipe}
    authenticated={authenticated} 
  />

在React中使用渲染而不是组件的问题

1 个答案: