NextJs
https://nextjs.org/docs
该框架可以用文件目录代替route,且会自动使用lazyloading;
内容为React代码;
只有pages文件夹下的文件为path;
其余的component照旧使用;
对component进行局部style
import React from 'react';
const user= (props)=> (
<div>
<h1>{props.name}</h1>
<p>Age: {props.age}</p>
<style jsx>
{`
div{
broder:1px solid #eee;
box-shadow:0 2px 3px #ccc;
padding:20px;
text-align:center;
}`}
</style>
</div>
);
export default user;
error handle
在pages建立_error.js
getInitialProps(context)
在服务器上render前进行异步操作;
class IndexPage extends Component{
static getInitialProps(context){ //在server上console
console.log(context);
const promise = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve({appName:'Super App'});
},1000);
});
return promise;
}
在function component中调用
import React from 'react';
import User from '../../components/User';
const authIndexPage = (props) => (
<div>
<h1>The Auth Index Page - {props.appName}</h1>
<User name="Max" age={28}/>
</div>
);
authIndexPage.getInitialProps = (context)=>{
console.log(context);
const promise = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve({appName:'Super App(Auth)'});
},1000);
});
return promise;
};
export default authIndexPage;