React PrivateRoute 未正确呈现 children

Question

Link to sandbox 当我使用 PrivateRoute 时，DOM 正在渲染 <children history="[object Object]" location="[object Object]" match="[object Object]"></children> 而不是我在 AppRouter.

中传递的 <AdminLayout/>

不确定我哪里出错了。

来自 PrivateRoute 的错误：children 未定义

还有这个：

Error: 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 `Context.Consumer`.

这是PrivateRoute

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

function PrivateRoute({ children, roles, ...rest }) {
  console.log("childen", children);
  return (
    <Route
      {...rest}
      render={(props) => {
        console.log("propsssss", props);
        // if (!localStorage.getItem('userid')) {
        if (!localStorage.getItem("access_token")) {
          // not logged in so redirect to login page with the return url
          return (
            <Redirect
              to={{ pathname: "/auth/login", state: { from: props.location } }}
            />
          );
        }

        // logged in so return component
        return <children {...props}/>;
      }}
    />
  );
}

export default PrivateRoute;

这是AppRouter

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

import history from "../helpers/history";

import AdminLayout from "layouts/Admin/Admin.js";
import AuthLayout from "layouts/Auth/Auth.js";
import PrivateRoute from "./PrivateRoute";

const AppRouter = () => {
  return (
    <Router history={history}>
        <PrivateRoute path="/admin" render={(props) => <AdminLayout {...props} />} />
        <Route
          path="/auth/login"
          render={(props) => <AuthLayout {...props} />}
        />
        <Redirect from="*" to="/auth/login" />
      </Switch>
    </Router>
  );
};

export default AppRouter;

这是history.js

import { createBrowserHistory } from "history";

const history = createBrowserHistory();

export default history;

Answer 1

代码中有两个问题，一个是您使用 renderProps 生成组件，但在您的 PrivateRoute 组件中您期望的是 children。正确的做法：

<PrivateRoute path="/admin">
   <AdminLayout />
</PrivateRoute>

在 PrivateRoute 里面你需要 return children 原样：

function PrivateRoute({ children, roles, ...rest }) {
  console.log("childen", children);
  return (
    <Route
      {...rest}
      render={(props) => {
        console.log("propsssss", props);
        // if (!localStorage.getItem('userid')) {
        if (!localStorage.getItem("access_token")) {
          // not logged in so redirect to login page with the return url
          return (
            <Redirect
              to={{ pathname: "/auth/login", state: { from: props.location } }}
            />
          );
        }

        // logged in so return component
        return children;
      }}
    />
  );
}

React PrivateRoute 未正确呈现 children

React PrivateRoute not rendering children properly

reactjs

react-router-v4