使用 Render 方法而不是 Route 中的组件时出错 [关闭]

Posted 2023-02-22

【中文标题】使用 Render 方法而不是 Route 中的组件时出错 [关闭]

【英文标题】：Error when using Render method but not component in Route [closed]

【发布时间】：2019-12-29 02:40:05

【问题描述】：

我目前遇到了错误

“元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从定义它的文件中导出您的组件，或者您可能混淆了默认导入和命名导入。”

我已经在网上搜索了这个错误，发现大多数时候它是由某人错误地导出或导入组件引起的，但我似乎找不到哪里做错了。

不过，我还是设法找到了一种方法来呈现我的组件。当我使用 PrivateRoute path="/protected" component=Protected 它可以工作，但如果我将PrivateRoute 与render (render=() => < Protected/>) 一起使用，它似乎会给我错误。我假设它与 PrivateRoute 或我如何调用组件有关。我将包括我的依赖项以确保我没有说错。这里还有一个指向我的代码框的链接：https://codesandbox.io/s/dawn-cherry-3yv8e?fontsize=14。

import React from "react";
import ReactDOM from "react-dom";
import 
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect,
  withRouter
 from "react-router-dom";
import "./styles.css";
import PrivateRoute from "./PrivateRoute";
import Login from "./Login";

function Protected() 
  return <h3>Protected</h3>;

function Public() 
  return <h3>public</h3>;


class App extends React.Component 
  render() 
return (
  <React.Fragment>
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/public">Public Page</Link>
          </li>
          <li>
            <Link to="/protected">Protected Page</Link>
          </li>
        </ul>
        <Switch>
          <Route path="/public" component=Public />
          <Route path="/login" render=() => <Login /> exact />
          <PrivateRoute
            path="/protected"
            // component=Protected
            render=() => <Protected />
            exact
          />
        </Switch>
      </div>
    </Router>
  </React.Fragment>
);



import React from "react";
import  Route, Redirect  from "react-router-dom";
import fakeAuth from "./fakeAuth";

function PrivateRoute( component: Component, ...rest ) 
  return (
    <Route
      ...rest
      render=props =>
        fakeAuth.isAuthenticated ? (
      <Component ...props />
    ) : (
      <Redirect
        to=
          pathname: "/login",
          state:  from: props.location 
        
      />
    )
  
/>
);

export default PrivateRoute;

如果您想查看其余代码，请检查上面链接的代码框。感谢您的帮助

【问题讨论】：

能否请您转到我的代码框并单击指向受保护页面的链接，然后单击登录。过去一天我一直在尝试查找错误，也没有看到任何问题，但我一直收到此错误

您的沙盒没有显示任何错误。它似乎与渲染道具一起工作正常。有什么问题？

好吧，我真的很困惑，我将尝试重新启动我的计算机，希望它能够自行修复。

【参考方案1】：

您应该相应地命名您的 PrivateRoute 道具，快速修复：

<PrivateRoute
    path="/protected"
    toRender=Protected
    // toRender=() => <Protected /> // This should also work
   exact
/>

// Here we use render prop as Component
function PrivateRoute( toRender: Component, ...rest ) 
  return (
    <Route
      ...rest
      render=props => ( 
        fakeAuth.isAuthenticated
          ? (
            <Component ...props />
          )
          : (
            <Redirect
              to=
                pathname: "/login",
                state:  from: props.location 
              
            />
          )
      )
    />
  );

Working example

【讨论】：

非常感谢！！！我真的对我的项目失去了希望。

很高兴能帮到你