时间戳

首页 > 解决方案 > 子组件未定义

javascript - 子组件未定义

问题描述

请参阅下面的函数，我正在创建 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;

标签： javascriptreactjsreact-router-dom

解决方案

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

这是我的 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 } }} />
          )
      )} />
  );
}

这里我在根 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"
/>

推荐阅读