React+Next+Mobx脚手架,动态路由,按需加载,NEXT 7.0.0 Ant3.9.2版本

#1
screen shot 2016-10-25 at 2 37 27 pm

Next.js是服务端渲染呈现的React应用程序的简约框架,这个项目通过配置Next.js+Mbox实现的一个Demo.
GitHub地址:https://github.com/Tecode/next-react
网站地址:https://soscoon.com/article/10059

##欢迎start

安装

git clone https://github.com/Tecode/next-react.git
npm install Or yarn

模块

  • react-helmet
  • mobx v5.0.3
  • next
  • less
  • Express v4.16.3
  • React v16.4.2
  • next-routes
  • antd v3.9.2

功能

  • SSR
  • Automatic code splitting

其它

使用了动态路由跳转使用next-routes提供的方法

  • Link example
import {Link} from '../routes'

export default () => (
  <div>
    <div>Welcome to Next.js!</div>
    <Link route='blog' params={{slug: 'hello-world'}}>
      <a>Hello world</a>
    </Link>
    or
    <Link route='/blog/hello-world'>
      <a>Hello world</a>
    </Link>
  </div>
)
  • Router example
import React from 'react'
import {Router} from '../routes'

export default class Blog extends React.Component {
  handleClick () {
    // With route name and params
    Router.pushRoute('blog', {slug: 'hello-world'})
    // With route URL
    Router.pushRoute('/blog/hello-world')
  }
  render () {
    return (
      <div>
        <div>{this.props.url.query.slug}</div>
        <button onClick={this.handleClick}>Home</button>
      </div>
    )
  }
}

如何使用

安装

npm install
or
yarn(推荐)

开发环境运行

npm run dev

产品环境运行

npm start

打包HTML静态文件

npm run biuld
1 Like