Reactjs 如何在nextjs中将数据从一个组件发送到另一个组件

我在nextjs中工作。我有标题组件，为了在所有其他页面中显示标题，用_app.js覆盖app.js。标题有2个导航链接usersList和users。 现在，我想将数据从标题组件发送到另一个页面，比如说usersList和单击标题中的submit的用户。我们如何实现这一点。 我知道我们可以使用上下文。我使用的是基于类的组件。我不知道我们是否可以使用上下文。 这个问题还有别的解决办法吗。。 请帮忙

header.js
class HeaderComponent extends Component {
 onSearch(event){
       //some code
    }
    render() {
        return (
            <div className="navbar">

                          <Input id="search-input" className="text-box" placeholder="Enter name or Email.." onKeyDown={($event)=>this.onSearch($event)} prefix={<Icon type="search" onClick={()=>this.onSearch} ></Icon>}></Input>


            </div>
            )
        }
    }
    export default HeaderComponent

header.js
类HeaderComponent扩展组件{
onSearch（事件）{
//一些代码
}
render（）{
返回(
this.onSearch（$event）}前缀={this.onSearch}>}>
)
}
}
导出默认标题组件

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>
    );
  }
}

import React，{Component}来自'React'；
从“./头”导入头；
类布局扩展组件{
渲染（）{
const{children}=this.props
返回(
{儿童}
);
}
}

_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>
    )
  }
}

从“React”导入React；
从“下一个/应用程序”导入应用程序；
从“../components/Layout”导入布局；
导出默认类MyApp扩展应用程序{
渲染（）{
const{Component，pageProps}=this.props
返回(
)
}
}

userList.js

class AppUser extends Component {
   render() {
       return (
           <Table
             rowKey={data._id}
             columns={this.columns1}

             onExpand={this.onExpand}
             dataSource={data} 
           />
       )
  }
}

类AppUser扩展组件{
render（）{
返回(
)
}
}

编辑：

---

我们可以通过道具来实现它吗？您可以使用ReactRedux创建一个商店，并让所有组件都可以访问它

[1]