Аутентификация пользователя по логике реакции

Question

Я пытаюсь реализовать функцию аутентификации пользователя для моего приложения реагирования, и мой подход заключается в следующем.

Я создал файл auth , например

import { createContext, useContext } from 'react';

    export const AuthContext = createContext();
    export function useAuth() {
       return useContext(AuthContext);
    }

И использовал его в моем App.js примерно так:

<Switch>
      <AuthContext.Provider value={false}>
        <LoginLayout path="/" component={Login} exact />
        <LoginLayout path="/register" component={Register} />
        <HomeLayout path="/dashboard" component={Dashboard} />
        <HomeLayout path="/evc" component={EvcStations} />
      </AuthContext.Provider>
</Switch>

Я создал PrivateRoute файл для обработки маршрутизации, если аутентификация ложна.

PrivateRoute.js

import {useAuth} from '../../services/auth'
import React from 'react';
import { Route,Redirect  } from 'react-router-dom';

    function PrivateRoute({ component: Component, ...rest }) {
        const isAuthenticated = useAuth();
        return (
            <Route {...rest} render={(props) => 
                isAuthenticated ? (
                <Component {...props} />
            ): (
                <Redirect to="/" />
              )}
            />
        );
    }
export default PrivateRoute;

Я использовал свой PrivateRoute в HomeLayout следующим образом.

HomeLayout.js

const HomeLayout = ({ component: Component, ...rest }) => {

    return (
        <PrivateRoute {...rest} render={matchProps => (
            <div id="">
                <div className="DefaultLayout mx-auto">
                    <div className="Header"><Header /></div>
                    <div><Component {...matchProps} /></div>
                </div>
            </div>
        )} />
    )
};
export default HomeLayout;

Вот где у меня проблема

Если аутентификация ложная, она будет правильно перенаправлена ​​на страницу входа. Но если аутентификация верна, я получаю сообщение об ошибке

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.

Что я здесь не так делаю?

Answer 1

Вы не пересылаете свой компонент на PrivateRoute

const HomeLayout = ({ component: Component, ...rest }) => {

    return (
        <PrivateRoute {...rest} component={Component} render={matchProps => (
            <div id="">
                <div className="DefaultLayout mx-auto">
                    <div className="Header"><Header /></div>
                    <div><Component {...matchProps} /></div>
                </div>
            </div>
        )} />
    )
};
export default HomeLayout;