Question

我正在与nextjs一起使用。我想在所有页面中使用通用的导航栏。尝试使用layout和props子项。当我点击链接时，导航栏消失了，并显示了另一页。下面是我的代码

layout.js

 import Header from './Header/header';
 const Layout = ({props}) => (
     <div>
         <Header></Header>
         {props}
     </div>

 );
 export default Layout;

app.js

 import Layout from '../components/Layout';
 function App() {
     return (
         <Layout>
             <div>

             </div>
         </Layout>  
      )
 }
 export default App;

header.js

import React, { Component } from 'react';
import '../Header/header.css';
import { Menu, Input, Icon } from 'antd';
import Link from 'next/link';


class HeaderComponent extends Component {
    render() {
        return (
            <div className="navbar">
                <div className="header">
                    <div className="col-1">
                        <div className="logo-section">
                            <img src="../../static/images/logo.png" ></img>    
                            <div >
                                <h3 className="bold">Homelife</h3>            <h3>Care</h3>
                            </div>
                        </div>
                        <div className="menu-col">
                            <div>
                                    <Link href="/appUser"><a>Seniors with Auth App Users</a></Link>
                            </div>
                            <div>
                                <Link href="/nonappUser"><a>Seniors without Auth  App Users</a></Link>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            )
        }
    }
    export default HeaderComponent

plzz帮助

Answer 1

我认为您没有破坏正确的道路。 props已传递到组件，因此您只需要从children解构props。而且，您需要将Layout组件包装在所有组件周围，以便可以共享该页面上的组件。

 import Header from './Header/header';
     const Layout = ({children}) => (
         <div>
             <Header></Header>
             {children}
         </div>

     );
     export default Layout;

如何在nextjs中具有通用导航栏标题

1 个答案: