在nextjs中具有通用的标头布局

Question

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

我是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;

我已经这样做，在第一次着陆时，只有标题存在，并且单击标题中的用户链接，标题就会消失，并且仅显示用户表。

编辑： 我尝试了在两个标题中都显示此标题，并在标题中放置了一个文本框。当我在页面之间切换时，textbox值会清除。

user.js和nonuser.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用作两个页面的通用标题吗？然后，建议将其放入您的components/Layout文件中。接下来，将所有页面包装在布局组件中，从而将标题添加到所有页面。

我还想知道为什么会有index.js文件？除非将其放在pages/文件夹中，否则通常不会在Next中执行此操作。页面user.js和nonuser.js也应放在pages/文件夹中。然后，Next将自动将加载到文件，并在路由/user和/nonuser下提供文件（基于文件名）。这还将使Next在上述布局组件中包装每个页面。

我建议您调查NextJS learning guide。它为NextJS提供了很好的介绍，并且使您可以更轻松地使用NextJS。他们有一堂讲解how to use Shared Components的课程，它确切地解释了您似乎在寻找什么。

希望这会有所帮助。

编辑：

使用_app.js

的示例

以下是接下来如何使用_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。