Почему свой route в React не отрабатывает?

Question

[Anfield94]

Имеется свой роут SharedRoute, который успешно импортирован в app, обернут свитчем и настроен( указаны путь,лэйаут,компонент), но по какой-то причине он рендерит пустую страницу, вообще не понимаю в чем причина, может где-то ошибся? спасибо за помощь.
SharedRoute:

export const SharedRoute = ({ component: Component, layout: Layout, componentProps, layoutProps, ...rest }) => {

    const encloseInErrorBoundary = props => (
        <ErrorBoundary>
            {Layout ? 
            <Layout { ...layoutProps }>
                <Component { ...componentProps }{ ...props }/>
            </Layout>
            :
            <Component {...componentProps} { ...props } />
        }
        </ErrorBoundary>
    );

    // if (!Component) throw new Error('A component needs to be specified for path ${(rest).path}');

    return <GuardedRoute { ...rest } render={ encloseInErrorBoundary } />;

};

export default SharedRoute;

APP :

function App() {
    const isAuth = useSelector(state => state.user.isAuth)
    const dispatch = useDispatch()

    useEffect(() => {
        dispatch(auth())
    }, [])


    return (
        <>
       
        <BrowserRouter>
                    <Switch>
                    <SharedRoute path="/" exact layout={ Layout }  component={ Navbar } />
                    <SharedRoute
                        path="/login"
                        component={Login}
                        exact
                        />
                        <SharedRoute 
                        component={Registration}
                        path="/registration"
                        />
                    <GuardedRoute path="/page" component={NewPage} auth={isAuth} />
                    
                    </Switch>
        </BrowserRouter>
        </>
    );
}

export default App;

Comments

[Александр]

Ещё для полной картины надо GuardedRoute и ErrorBoundary (надеюсь он выводит ошибки Вам в консоль, т. к. если есть fallback пустой, это может быть причиной).

[Anfield94]

Александр, GuardedRoute:

const GuardedRoute = ({ component: Component, auth, ...rest }) => (
    <Route {...rest} render={(props) => (
        auth === true
            ? <Component {...props} />
            : <Redirect to='/' />
    )} />
)

export default GuardedRoute;

ErrorBoundary:

class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
  
    // static getDerivedStateFromError(error) {
    //   return { hasError: true };
    // }
  
    componentDidCatch(error, errorInfo) {
        console.log('caught an error', error, errorInfo);
        this.setState({ error: true})
      }
  
      render() {
        if (this.state.error) {
          return (
            <div>
              An error has occurred!
            </div>
          );
        }
          return this.props.children;
      }
    }

  export default ErrorBoundary;

[Александр]

Anfield94, как минимум Вы перезаписываете render в GuardedRoute.

[Anfield94]

Александр, точно, вижу, что ошибка в GuardedRoute, т.к. если в SharedRoute возвращаю обычный Route, a не GuardedRoute, то все отлично, буду исправлять, спасибо большое