详解使用Next.js构建服务端渲染应用(2)

next.js使用next/link实现页面之间的跳转,用法如下:

import Link from 'next/link'

const Index = () => (
 <div>
 <Link href="/about" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <a>About Page</a>
 </Link>
 <p>Hello next.js</p>
 </div>
)

export default Index

这样点击index页面的AboutPage链接就能跳转到about页面,而点击浏览器的返回按钮也是通过前端路由进行跳转的。 官方文档说用前端路由跳转是不会有网络请求的,实际会有一个对about.js文件的请求,而这个请求来自于页面内动态插入的script标签。但是about.js只会请求一次,之后再访问是不会请求的,毕竟相同的script标签是不会重复插入的。 但是想比于后端路由还是大大节省了请求次数和网络流量。前端路由和后端路由的请求对比如下:

前端路由:

后端路由:

Link标签支持任意react组件作为其子元素,不一定要用a标签,只要该子元素能响应onClick事件,就像下面这样:

<Link href="/about" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <div>Go about page</div>
</Link>

Link标签不支持添加style和className等属性,如果要给链接增加样式,需要在子元素上添加:

<Link href="/about" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <a className="about-link" style={{color:'#ff0000'}}>Go about page</a>
</Link>

Layout

所谓的layout就是就是给不同的页面添加相同的header,footer,navbar等通用的部分,同时又不需要写重复的代码。在next.js中可以通过共享某些组件实现layout。

我们先增加一个公共的header组件,放在根目录的components文件夹下面(页面级的组件放pages中,公共组件放components中):

import Link from 'next/link';

const linkStyle = {
 marginRight: 15
}

const Header = () => (
 <div>
  <Link href="/" rel="external nofollow" rel="external nofollow" >
   <a style={linkStyle}>Home</a>
  </Link>
  <Link href="/about" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   <a style={linkStyle}>About</a>
  </Link>
 </div>
)

export default Header;
      

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/332.html