进修 Next.js: 页面之间的导航

2024年5月14日 221次阅读 来源: developerworks

原始文档在 https://github.com/developerw… 如今搬过来.

进修 Next.js: 入门
进修 Next.js: 页面之间的导航
进修 Next.js: 运用同享组件
进修 Next.js: 建立动态内容
进修 Next.js: 运用路由掩码建立清洁的URL
进修 Next.js: 清洁URL的服务器支撑
进修 Next.js: 猎取数据
进修 Next.js: 布置

页面之间的导航

如今我们知道了怎样建立一个Next.js应用程序而且运转它. 我们的示例应用程序只要一个简朴的页面, 然则假如你想, 可以增加更多的页面. 比方, 可以建立一个 “About” 页面, 并增加内容到 pages/about.js.

export default () => {
  <div>
    <p>This is the about page</p>
  </div>
}

然后, 我们可以翻开 http://localhost:3000/about 来接见这个页面. 然后我们须要链接这些页面, 运用HTML的 “a” 标签, 然则它并不会实行客户端导航, 它是实行的服务器端导航, 这并非我们想要的.

为了支撑客户端导航, 我们须要运用Next.js 的Link API, 它是经由历程 next/link 导出的. 下面我们来看看怎样运用它.

设置

为了根据本课程进修, 须要有一个示例Next.js应用程序, 为此, 你可以下载下面的这个应用程序作为进修案例:

git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout getting-started

可以用下面的敕令来运转:

npm install
npm run dev

如今, 接见 http://localhost:3000/.

运用 Link

如今我们将会运用 next/link 来衔接我们的页面. 增加以下代码到 page/index.js 模块文件

// This is the Link API
import Link from 'next/link'

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

export default Index

在这个例子中, 我们导入了 next/link 作为 Link 模块, 而且向下面如许运用它:

<Link href="/about">
  <a>About Page</a>
</Link>

如今, 再次接见 http://localhost:3000/, 点击 “About Page” 衔接, 你将被带到 “About Page” 页面.

这是客户端导航, 行动发作在客户端, 没有要求服务器. 你可以翻开浏览器开发工具的收集标签, 看看有无收集要求来考证.

下面是一个简朴的使命:

形貌一下, 点击退却按钮后你看到了什么? 是的, 客户端导航把你带回了Index页面.

客户端汗青支撑

当你点击退却按钮的时刻, Next.js把你带回了Index页面, 这个历程完全是客户端完成的; next/link 为你处理了一切 location.history相干的事变. 你以至不须要编写恣意一行客户端路由代码.

你须要做的只是简朴的衔接页面罢了, 就如许!

给衔接增加款式

大多数状况, 我们可以想要给衔接增加一点款式. 想下面如许:

<Link href="/about">
  <a style={{ fontSize: 20 }}>About Page</a>
</Link>

增加了款式后, 你会看到, 款式被准确的设置了.

然则, 假如你想下面一样呢, 会发作什么?

<Link href="/about" style={{ fontSize: 20 }}>
  <a>About Page</a>
</Link>

对的, 没任何结果!

衔接仅仅是一个高阶组件(HOC:Higher Order Component)

实际上, 款式属性在 next/link 上是没有结果的. 由于 next/link 仅仅是一个可以吸收 href 属性, 以及其他属性的高阶主键. 假如你要给它设置款式, 须要在底层的组件举行设置.

运用按钮举行衔接

如今, 我们须要一个按钮而不是一个衔接, 如今我们须要修正我们的导航代码, 像如许:

<Link href="/about">
  <button>Go to About Page</button>
</Link>

让衔接可以恣意事情

就像一个按钮一样, 你可以在Link中安排任何你的自定义React组件, 以至是一个div元素.放在Link中的组件的唯一要求是, 它可以接收一个 onClick 属性.

衔接虽然简朴, 然则壮大

这里, 我们只看到了关于 next/link 的很基础的例子. 接下来的课程我们会越发深切的相识怎样运用Link. 假如你想要相识Next.js的路由功用, 参考 Next.js 路由文档 文档.

    原文作者：developerworks
    原文地址: https://segmentfault.com/a/1190000009604642
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞