子组件未定义答案

【问题标题】：Children Component undefined子组件未定义
【发布时间】：2020-07-05 00:49:59
【问题描述】：

请参阅下面的函数，我正在创建 Auth 路由并让子代未定义并显示空白页。在 App.js 中，我使用的是私有路由，如下所示，当我使用简单路由而不是 PrivateRoute 时，它会显示登录组件

<PrivateRoute exact path="/" name="Login" render={props => <Login {...props}/>} />

这是我的 PrivateRoute.js。当我安慰孩子们时，它的显示未定义

function PrivateRoute({ children, ...rest }) {
const token = cookie.get('token');
  return (
    <Route
      {...rest}
      render={({ location }) =>
        !token ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/dashboard",
              state: { from: location }
            }}
          />
        )
      }
    />
  );
}
export default Private Route;

【问题讨论】：

在我看来你没有发送 children 组件，所以它永远不会看到 children 道具。
@GuilhermeFelipeReis 看到我的私人路线我正在发送我的道具，但它没有在 PrivateRoute 中接收
在我看来，你没有传递孩子，孩子不是那里的组件

标签： javascript reactjs react-router-dom

【解决方案1】：

儿童参考标签内的内容

<PrivateRoute>
    <PrivateComponent/>
</PrivateRouter>

你的孩子会是<PrivateComponent/>

在您的示例中，您没有在 PrivateRoute 中传递任何内容。所以你会有未定义的

【讨论】：

【解决方案2】：

我通常使用类似的东西。请让我知道这对你有没有用。

这是我的 privateRoute.js 组件：

import React from 'react';

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

import { isAuthenticated } from 'auth';

export default function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route {...rest} render={
      props => (
        isAuthenticated() ? (
          <Component {...props} />
        ) : (
            <Redirect to={{ pathname: '/', state: { from: props.location } }} />
          )
      )} />
  );
}

这里我在 root auth.js 中有另一个文件：

export const isAuthenticated = () =>  {
  return Boolean(localStorage.getItem('jwttoken'));
}

export const login = ({email, password}) => {
  // Logic
 localStorage.setItem('jwttoken', 'jkdsalkfj');
  return true;
}

export const logout = () => {
  localStorage.removeItem('jwttoken');
}

你可以这样称呼它：

<PrivateRoute
  component={ProjectPage}
  path="/project/:id"
/>

【讨论】：