Question

我当前遇到错误

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

我在网上搜索了该错误，发现大多数情况下是由于有人错误地导出或导入组件而导致的，但是我似乎找不到在哪里做错了。

仍然，我设法找到了一种渲染组件的方法。当我使用 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;

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

Answer 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

使用渲染方法但不使用Route

1 个答案: