西树架构| 西树工作室 | 西树课堂

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 21|回复: 0

06.使用Link组件替换a标签实现切换导航无刷新

[复制链接]

6

主题

6

帖子

50

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
50
发表于 2019-11-25 00:21:33 | 显示全部楼层 |阅读模式

06.使用Link组件替换a标签实现切换导航无刷新

把 <a></a> -> <Link></link>
import Link from 'next/link'

在导航中使用,源码如下

import React, { Component } from 'react'
import Link from 'next/link'
export default class Nav extends Component {
  render () {
    return (
      <div>
        <ul className="nav">
          <li className="nav-item">
            <Link  href="/"><a className="nav-link active">home</a></Link>
          </li>
          <li className="nav-item">
            <Link  href="/blog"><a className="nav-link">blog</a></Link>
          </li>
          <li className="nav-item">
            <Link  href="/about"><a className="nav-link">about</a></Link>
          </li>
        </ul>
      </div>
    )
  }
}

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|西树架构

GMT+8, 2019-12-12 21:53 , Processed in 0.038485 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表