这个是根据nextjs服务端渲染做的一个小demo



关键性代码，主要是控制模态框显示隐藏

关于index页面

//index.js

/* eslint-disable jsx-a11y/anchor-is-valid */

import React from 'react';

import PropTypes from 'prop-types';

import Button from '@material-ui/core/Button';

import Dialog from '@material-ui/core/Dialog';

import DialogTitle from '@material-ui/core/DialogTitle';

import DialogContent from '@material-ui/core/DialogContent';

import DialogContentText from '@material-ui/core/DialogContentText';

import DialogActions from '@material-ui/core/DialogActions';

import Typography from '@material-ui/core/Typography';

import { withStyles } from '@material-ui/core/styles';

import Link from 'next/link';

const styles = theme => ({

  root: {

    textAlign: 'center',

    paddingTop: theme.spacing.unit * 20,

  },

});

class Index extends React.Component {

  state = {

    open: false,

  };

  handleClose = () => {

    this.setState({

      open: false,

    });

  };

  handleClick = () => {

    this.setState({

      open: true,

    });

  };

  render() {

    const { classes } = this.props;

    const { open } = this.state;

    return (

      <div className={classes.root}>

        <Dialog open={open} onClose={this.handleClose}>

          <DialogTitle>Super Secret Password</DialogTitle>

          <DialogContent>

            <DialogContentText>1-2-3-4-5</DialogContentText>

          </DialogContent>

          <DialogActions>

            <Button color="primary" onClick={this.handleClose}>

              OK

            </Button>

          </DialogActions>

        </Dialog>

        <Typography variant="h4" gutterBottom>

          Material-UI

        </Typography>

        <Typography variant="subtitle1" gutterBottom>

          example project

        </Typography>

        <Typography gutterBottom>

          <Link href="/about">

            <a>Go to the about page</a>

          </Link>

        </Typography>

        <Button variant="contained" color="secondary" onClick={this.handleClick}>

          Super Secret Password

        </Button>

      </div>

    );

  }

}

Index.propTypes = {

  classes: PropTypes.object.isRequired,

};

export default withStyles(styles)(Index);

关于about页面



代码如下：

//about.js

/* eslint-disable jsx-a11y/anchor-is-valid */

import React from 'react';

import PropTypes from 'prop-types';

import Button from '@material-ui/core/Button';

import Typography from '@material-ui/core/Typography';

import { withStyles } from '@material-ui/core/styles';

import Link from 'next/link';

const styles = theme => ({

  root: {

    textAlign: 'center',

    paddingTop: theme.spacing.unit * 20,

  },

});

function About(props) {

  const { classes } = props;

  console.log('classes..props',classes);

  return (

    <div className={classes.root}>

      <Typography variant="h4" gutterBottom>

        Material-UI

      </Typography>

      <Typography variant="subtitle1" gutterBottom>

        about page

      </Typography>

      <Typography gutterBottom>

        <Link href="/">

          <a>Go to the main page</a>

        </Link>

      </Typography>

      <Button variant="contained" color="primary">

        Do nothing button

      </Button>

    </div>

  );

}

About.propTypes = {

  classes: PropTypes.object.isRequired,

};

export default withStyles(styles)(About);


//app.js

import React from 'react';

import App, { Container } from 'next/app';

import Head from 'next/head';

import { MuiThemeProvider } from '@material-ui/core/styles';

import CssBaseline from '@material-ui/core/CssBaseline';

import JssProvider from 'react-jss/lib/JssProvider';

import getPageContext from '../src/getPageContext';

class MyApp extends App {

  constructor() {

    super();

    this.pageContext = getPageContext();

  }

  componentDidMount() {

    // Remove the server-side injected CSS.

    const jssStyles = document.querySelector('#jss-server-side');

    if (jssStyles && jssStyles.parentNode) {

      jssStyles.parentNode.removeChild(jssStyles);

    }

  }

  render() {

    const { Component, pageProps } = this.props;

    return (

      <Container>

        <Head>

          <title>My page</title>

        </Head>

        {/* Wrap every page in Jss and Theme providers */}

        <JssProvider

          registry={this.pageContext.sheetsRegistry}

          generateClassName={this.pageContext.generateClassName}

        >

          <MuiThemeProvider

            theme={this.pageContext.theme}

            sheetsManager={this.pageContext.sheetsManager}

          >

            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}

            <CssBaseline />

            {/* Pass pageContext to the _document though the renderPage enhancer

                to render collected styles on server-side. */}

            <Component pageContext={this.pageContext} {...pageProps} />

          </MuiThemeProvider>

        </JssProvider>

      </Container>

    );

  }

}

export default MyApp;

nextjs-demo的更多相关文章

  1. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  2. 很多人很想知道怎么扫一扫二维码就能打开网站，就能添加联系人，就能链接wifi，今天说下这些格式，明天做个demo

    有些功能部分手机不能使用,网站,通讯录,wifi基本上每个手机都可以使用. 在看之前你可以扫一扫下面几个二维码先看看效果: 1.二维码生成 网址 (URL) 包含网址的 二维码生成 是大家平时最常接触 ...

  3. 在线浏览PDF之PDF.JS （附demo）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla.gith ...

  4. 【微框架】Maven +SpringBoot 集成 阿里大鱼 短信接口详解与Demo

    Maven+springboot+阿里大于短信验证服务 纠结点:Maven库没有sdk,需要解决 Maven打包找不到相关类,需要解决 ps:最近好久没有写点东西了,项目太紧,今天来一篇 一.本文简介 ...

  5. vue双向数据绑定原理探究(附demo)

    昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...

  6. Android Studio-—使用OpenCV的配置方法和demo以及开发过程中遇到的问题解决

    前提: 1.安装Android Studio(过程略) 2.官网下载OpenCV for Android 网址:http:opencv.org/downloads.html 我下载的是下图的版本 3. ...

  7. iOS之ProtocolBuffer搭建和示例demo

    这次搭建iOS的ProtocolBuffer编译器和把*.proto源文件编译成*.pbobjc.h 和 *.pbobjc.m文件时,碰到不少问题! 搭建pb编译器到时没有什么问题,只是在把*.pro ...

  8. 钉钉开放平台demo调试异常问题解决：hostname in certificate didn't match

    今天研究钉钉的开放平台,结果一个demo整了半天,这帮助系统写的也很难懂.遇到两个问题: 1.首先是执行demo时报unable to find valid certification path to ...

  9. 无限分级和tree结构数据增删改【提供Demo下载】

    无限分级 很多时候我们不确定等级关系的层级,这个时候就需要用到无限分级了. 说到无限分级,又要扯到递归调用了.(据说频繁递归是很耗性能的),在此我们需要先设计好表机构,用来存储无限分级的数据.当然,以 ...

  10. 轻量级通信引擎StriveEngine —— C/S通信demo（附源码）

    前段时间,有几个研究ESFramework的朋友对我说,ESFramework有点庞大,对于他们目前的项目来说有点“杀鸡用牛刀”的意思,因为他们的项目不需要文件传送.不需要P2P.不存在好友关系.也不 ...

随机推荐

  1. JAVA基础之——JDK包分析concurrent

    concurrent在哪儿:jdk\jre\lib\rt.jar package java.util.concurrent; 本文从特性.分类.扩展方面一一道来. 1 特性 包中包含大量有用的构建块, ...

  2. HDU 2433 (最短路+BFS+剪枝)

    http://acm.hdu.edu.cn/showproblem.php?pid=2433 这个问题因为路径都是1,所以可以用bfs遍历 可以看这几篇文章讲解: http://blog.csdn.n ...

  3. K：栈和队列的比较

    栈和队列的相同点: 都是线性结构,即数据元素之间具有"一对一"的逻辑关系 都可以在顺序存储结构和链式存储结构上进行实现 在时间代价上,插入和删除操作都需常数时间:在空间代价上,情况 ...

  4. 关于二进制和字符串及base64格式

    字符串转二进制可以直接转,而二进制转字符串不可以,其中间包含的各种特殊符号,转成字符串时会出现问题,需要将二进制进行base64编码,并且需要在结尾加上#0表示结尾,然后转成字符串.

  5. 《JavaWeb从入门到改行》关于BaseServlet那些事

    @为什么需要BaseServlet?  我们知道一个POST或者GET提交对应着一个Servlet, 无数的提交会让Servlet页面增加,我们希望一个Servlet就能处理很多提交的请求. @Bas ...

  6. 3d图片点击切换

    效果图: 代码块: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  7. 关于webpack 配置文件找不到

    运行命令  npm run eject 将配置文件解压出来 如果运行这个命令有错的时候,很可能与 git 有关 这时候,打开项目文件夹,显示所有隐藏的文件夹(工具),如果显示了git 的文件夹  删掉 ...

  8. linux shell实现守护进程 看门狗 脚本

    嵌入式初学者,第一次上传代码.昨天做了一个udhcpd与udhcpc的守护,目前只会用shell模仿编写,还有什么方法可以做守护呢? ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...

  9. VMware下Linux配置局域网和外网访问(CentOS)

    要使用Linux系统很重要的一个操作就是使Linux系统能够访问互联网,只有Linux系统能够访问互联网才能够去下载很多自己所需要的资源,如果不能访问互联网那么使用Linux系统往往会卡在这一步,假设 ...

  10. XSS防范之Encode（转）

    防范XSS有三道防火墙:数据的输入校验,数据输出Encode,浏览器安全(主要就是CSP),这里主要介绍Encode. #用于XSS防范的Encode 用户防范XSS的Encode主要有三种:Html ...