Детский компонент не определен

Question

См. Нижеприведенную функцию: я создаю маршруты Auth, получаю неопределенных детей и показывает пустую страницу. В приложении. js я использую приватный маршрут, как вы можете видеть ниже, и когда я использую простой Маршрут вместо PrivateRoute, он показывает компонент Login

<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;

Answer 1

Дети ссылаются на то, что находится внутри тега

<PrivateRoute>
    <PrivateComponent/>
</PrivateRouter>

Здесь ваши дети будут <PrivateComponent/>

В вашем примере вы ничего не передаете в свой PrivateRoute. Таким образом, вы будете иметь неопределенный

Answer 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"
/>