Блог

Я хочу создать другой макет в своем приложении nextjs. Я где-то видел этот метод при добавлении множественного/вложенного макета в следующий js. Проблема в том, что я не могу заставить это работать, всегда есть эта ошибка:

Ошибка: MyApp(…): Из рендеринга ничего не было возвращено. Обычно это означает, что оператор return отсутствует. Или, чтобы ничего не отображать, верните значение null.

Теперь это мой код:

Мой _app.js

 import Layout from "./../components/Layout";

function MyApp({ Component, pageProps }) {

    const getLayout = Component.pageLayout || ((page) => <Layout>{page}</Layout>);

    return getLayout(<Component {...pageProps} />);

}

export default MyApp;
 

Это мой макет

 import React, { Fragment, useState, useEffect, useRef } from "react";
import { useRouter } from 'next/router';
import NavBar from "./../NavBar";
import MidNavBar from "./../MidNavBar";
import Banner from "./../Banner";

const Layout = ({ children, navBarRefProps }) => {

    const navBarRef = useRef();

    const router = useRouter();

    const navBarRefPropsHandle = (props) => {
        navBarRef.current = props.current;
        navBarRefProps(navBarRef.current);
    }

    return(
        <Fragment>
            <div className="wrapper">
                <NavBar navBarRefProps={ navBarRefPropsHandle } />
                <div className="inner_wrapper">
                    <Banner/>
                    {
                        router.pathname !== "/" ?
                            <MidNavBar midNavBarRefProps = {midNavBarRefPropsHandle} dummyRefProps={dummyRefPropsHandle}/>
                        :
                        ""
                    }
                    { children }
                </div>
            </div>
        </Fragment>
    )

}
 

Это мой еще один выход

 const AnotherLayout = ({ children }) => {
    return(
        <Fragment>
            <main>
                <div>
                    <aside className="menu">
                        <div className="menu_header">
                            <div className="menu_title">
                                <span>
                                    Panel
                                </span>
                                <button onClick={logoutHandle}>
                                    logout
                                </button>
                            </div>
                            <button className="burger" onClick={openMenuHandle}>
                                <div className="burger-one">

                                </div>
                                <div className="burger-two">

                                </div>
                                <div className="burger-three">

                                </div>
                            </button>
                        </div>
                        <div ref={menuBodyRef} className="menu_body">
                            <ul>
                                <li>
                                    <Link href={ url   "/rooms" }>
                                        <div>
                                        </div>
                                        News
                                    </Link>
                                </li>
                                <li>
                                    <Link href={ url   "/events" }>
                                        <div>
                                        </div>
                                        Events
                                    </Link>
                                </li>
                                <li>
                                    <Link href={ url   "/categories" }>
                                        <div>
                                            <i className="fas fa-snowboarding"></i>
                                        </div>
                                        Activities
                                    </Link>
                                </li>
                            </ul>
                        </div>
                    </aside>
                    <section className="container_panel">
                        { children }
                    </section>
                </div>
            </main>
        </Fragment>
    )    
}

export default AnotherLayout;
 

А это моя указательная страница

 import React, { Fragment, useState, useEffect, useRef } from "react";
import AnotherLayout from "./../../../../components/AnotherLayout";

const Panel = () => {

    // a lot of codes here.....

    return(
        <Fragment>
            <section>
                <div>
                    <div>
                        <h1><span>Rooms</span> Panel</h1>
                    </div>
                    <div className="container_table">
                        <table>
                            <thead>
                                <tr>
                                    <td>Rooms</td>
                                    <td>
                                        <div>
                                            <input type="search" name="search" placeholder="search"/>
                                        </div>
                                    </td>
                                    <td className="col_add">
                                        <button>
                                            add 
                                            rooms
                                        </button>
                                    </td>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    rooms.map(room => {
                                        return(
                                            <tr key={room._id}>
                                                <td colSpan="2">
                                                    <button>{room.title}</button>
                                                </td>
                                                <td className="ud">
                                                    <button className="edit">
                                                        edit
                                                    </button>
                                                    <button className="delete">
                                                        delete
                                                    </button>
                                                </td>
                                            </tr>
                                         )
                                    })
                                }
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td>

                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </section>
        </Fragment>
    )
}

Panel.getLayout = (page) => {
    <AdminLayout>
        { page }
    </AdminLayout>
}

export default Panel;
 

Спасибо!.

Решил эту проблему, добавив return()

 Panel.getLayout = (page) => {
    return(
        <AdminLayout>
            { page }
        </AdminLayout>
    )
}