如何在nextjs中停止客户端路由的布局渲染

时间:2019-09-20 13:49:40

标签: reactjs next.js

我有2个组件.2个组件包含表格。在页面之间导航时。当我切换回上一个组件时,整个组件都会重新呈现页面。如何避免它

{
  "manifest_version": 2,
  "name": "Redact The Web",
  "offline_enabled": true,
  "version": "1.0.0",
  "description": "Extension that redacts text on the web",
  "icons": {
    "16": "icon16.png",
    "19": "icon19.png",
    "24": "icon24.png",
    "32": "icon32.png",
    "38": "icon38.png",
    "48": "icon48.png",
    "64": "icon64.png",
    "128": "icon128.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {},
  "permissions": ["activeTab", "https://*/*", "http://*/*"]
}

layout.js

header.js
class HeaderComponent extends Component {
 onSearch(event){
       //some code
    }
    render() {
        return (
            <div className="navbar">
              <Link href="/appUser"><a>Seniors with Auth App Users</a></Link>
              <Link href="/nonAppUser"><a>Seniors without Auth  App Users</a></Link>
            </div>
            )
        }
    }

_app.js

import Header from './Header';

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

UserList.js(包含表的另一个ListComponent)。

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

如何在UserList.js中componentDidMount和重新呈现 请帮助

0 个答案:

没有答案