在 nextjs 中有一个通用的 header 布局

Question

我有 2 页 user.js 和 nonuser.js 以及一个组件 header。 user.js 和 nonuser.js 具有相同的功能，但 UI 略有变化。现在我想整合所有这些。就像我访问页面时默认必须查看table of user.js。单击 nonuser.js 它应该更改为 nonuser.js table。我希望两者的 header 相同，当我在页面之间切换时，文本框中的内容不应更改。

我是 next.js 的新手并且有反应

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="menu">
                            <div>
                                    <Link href="/User"><a>Users</a></Link>
                            </div>
                            <div>
                                <Link href="/nonUser"><a>Non Users</a></Link>
                            </div>
                            <Input className="text-box" placeholder="Enter name" prefix={<Icon type="search" ></Icon>}></Input>

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

user.js

class User extends Component {
 render() {
        return (
            <React.Fragment>
                   <div className="ant-table-row">
                        <div className="table-head-text">

                            <span className="text">Users({data.length})</span>
                            <Pagination defaultCurrent={1} total={100} />
                        </div>
                        <Table
                            rowKey={data._id}
                            columns={this.columns1}
                            rowSelection={this.rowSelection}
                            onExpand={this.onExpand}
                            dataSource={data} />
                    </div>
         </React.Fragment>
       )
}

我没有添加非用户组件，它和用户组件一样

index.js

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

         </div>

 )
}
export default App;

我已经这样做了，第一次登陆时只有 header 在那里，点击 header 中的用户 link 时，header 消失，只有 [=62] =] 显示用户。

编辑： 我试过这个 header 出现在两者中，我在 header 中放置了一个文本框。当我在页面之间切换时，文本框值会清除。

user.js 和非user.js

 render(){
   return(
            <Layout>
                <div>.....</div>
            </Layout>
    )
 }

也试过了 index.js

   render() {
    return (
        <Layout>
            <div>

            </div>
        </Layout>

    )
}

layout.js

const Layout = ({children}) => (


   <div>
     <Header></Header>
     {children}
   </div>

  );

Answer 1

根据我对您问题的理解，您想将 HeaderComponent 用作两个页面的通用 header 吗？那么我建议将它放在您的 components/Layout 文件中。接下来会将布局组件中的所有页面包装起来，从而将您的 header 添加到所有页面。

我也想知道为什么你有一个 index.js 文件？除非它被放置在 pages/ 文件夹中，否则您通常不会在 Next 中执行此操作。 user.js 和 nonuser.js 页面也应放在 pages/ 文件夹中。 Next 将自动加载 to 文件并在路由 /user 和 /nonuser 下提供它们（基于文件的名称）。这样也会让Next把上面提到的布局组件中的每个页面都包裹起来。

我建议查看 NextJS learning guide. It provides a very good introduction to NextJS and will make it a lot easier to use NextJS if you. They have a lesson explaining how to use Shared Components，它可以准确解释您似乎在寻找什么。

希望对您有所帮助。

编辑：

示例使用 _app.js

下面是如何在next using_app.js中使用自定义布局组件的例子。它基于 Nexts 自己的 example.

// components/Layout.js
import React, { Component } from 'react';
import Header from './Header';

class Layout extends Component {
  render () {
    const { children } = this.props
    return (
      <div className='layout'>
        <Header />
        {children}
      </div>
    );
  }
}

// pages/_app.js
import React from 'react';
import App from 'next/app';
import Layout from '../components/Layout';

export default class MyApp extends App {
  render () {
    const { Component, pageProps } = this.props
    return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
    )
  }
}

要获取有关如何正确使用 _app.js 的更多信息，请查看他们的 documentation on custom app。