next.js 页面跳转_使用链接在Next.js中链接两个页面

next.js 页面跳转

This tutorial starts where the first Next.js tutorial left off. We built a site with one page:

本教程从第一个Next.js教程停下来的地方开始。 我们建立了一个只有一页的网站：

I want to add a second page to this website, a blog posts list. It’s going to be served into /blog, and for the time being it will just contain a simple static page, just like our first index.js component:

我想在此网站上添加第二页，即博客文章列表。 它将被提供给/blog ，并且暂时将只包含一个简单的静态页面，就像我们的第一个index.js组件一样：

After saving the new file, the npm run dev process already running is already capable of rendering the page, without the need to restart it.

保存新文件后，已经运行的npm run dev进程已经能够呈现页面，而无需重新启动它。

When we hit the URL http://localhost:3000/blog we have the new page:

当我们点击URL http：// localhost：3000 / blog时，我们将打开新页面：

and here’s what the terminal told us:

这是终端告诉我们的内容：

Now the fact that the URL is /blog depends on just the filename, and its position under the pages folder.

现在，URL为/blog的事实仅取决于文件名及其在pages文件夹下的位置。

You can create a pages/hey/ho page, and that page will show up on the URL http://localhost:3000/hey/ho.

您可以创建一个pages/hey/ho页面，该页面将显示在URL http：// localhost：3000 / hey / ho上 。

What does not matter, for the URL purposes, is the component name inside the file.

对于URL而言，无所谓的是文件内的组件名称。

Try going and viewing the source of the page, when loaded from the server it will list /_next/static/development/pages/blog.js as one of the bundles loaded, and not /_next/static/development/pages/index.js like in the home page. This is because thanks to automatic code splitting we don’t need the bundle that serves the home page. Just the bundle that serves the blog page.

尝试浏览页面的源代码，当从服务器加载页面时，它会将/_next/static/development/pages/blog.js列为已加载的捆绑包之一，而不是/_next/static/development/pages/index.js就像在主页上一样。 这是因为通过自动代码拆分，我们不需要用于主页的捆绑软件。 只是用于博客页面的捆绑软件。

We can also just export an anonymous function from blog.js:

我们也可以从blog.js导出一个匿名函数：

export default () => (
  <div>
    <h1>Blog</h1>
  </div>
)

or if you prefer the non-arrow function syntax:

或者，如果您更喜欢非箭头函数语法：

export default function() {
  return (
    <div>
      <h1>Blog</h1>
    </div>
  )
}

Now that we have 2 pages, defined by index.js and blog.js, we can introduce links.

现在我们有2个页面，分别由index.js和blog.js定义，我们可以介绍链接。

Normal HTML links within pages are done using the a tag:

页面内的普通HTML链接是使用a标签完成的：

<a href="/blog">Blog</a>

We can’t do do that in Next.js.

我们无法在Next.js中做到这一点。

Why? We technically can, of course, because this is the Web and on the Web things never break (that’s why we can still use the <marquee> tag. But one of the main benefits of using Next is that once a page is loaded, transitions to other page are very fast thanks to client-side rendering.

为什么？ 我们在技术上当然可以 ，因为这是Web 和网络的事情从来没有突破 (这就是为什么我们仍然可以使用<marquee>标记，但使用接下来的主要好处之一是，一旦页面加载，转换借助客户端渲染，到其他页面的速度非常快。

If you use a plain a link:

如果使用普通的a链接：

const Index = () => (
  <div>
    <h1>Home page</h1>
    <a href='/blog'>Blog</a>
  </div>
)
 
export default Index

Now open the DevTools, and the Network panel in particular. The first time we load http://localhost:3000/ we get all the page bundles loaded:

现在打开DevTools ，尤其是“ 网络”面板 。 第一次加载http://localhost:3000/我们将加载所有页面捆绑：

Now if you click the “Preserve log” button (to avoid clearing the Network panel), and click the “Blog” link, this is what happens:

现在，如果您单击“保留日志”按钮(以避免清除“网络”面板)，然后单击“博客”链接，将发生以下情况：

We got all that JavaScript from the server, again! But.. we don’t need all that JavaScript if we already got it. We’d just need the blog.js page bundle, the only one that’s new to the page.

我们再次从服务器获得了所有JavaScript！ 但是..如果我们已经有了JavaScript，就不需要所有JavaScript。 我们只需要blog.js页面捆绑包，这是blog.js面上唯一的新捆绑包。

To fix this problem, we use a component provided by Next, called Link.

要解决此问题，我们使用Next提供的名为Link的组件。

We import it:

我们导入它：

import Link from 'next/link'

and then we use it to wrap our link, like this:

然后我们用它来包装我们的链接，像这样：

import Link from 'next/link'
 
const Index = () => (
  <div>
    <h1>Home page</h1>
    <Link href='/blog'>
      <a>Blog</a>
    </Link>
  </div>
)
 
export default Index

Now if you retry the thing we did previously, you’ll be able to see that only the blog.js bundle is loaded when we move to the blog page:

现在，如果您重试我们之前做过的事情，您将能够看到在移至博客页面时仅加载了blog.js捆绑包：

and the page loaded so faster than before, the browser usual spinner on the tab didn’t even appear. Yet the URL changed, as you can see. This is working seamlessly with the browser History API.

并且页面加载速度比以前快，该标签上的浏览器常规微调框甚至都没有出现。 如您所见，URL已更改。 这与浏览器的History API无缝配合。

This is client-side rendering in action.

这是实际的客户端渲染。

What if you now press the back button? Nothing is being loaded, because the browser still has the old index.js bundle in place, ready to load the /index route. It’s all automatic!

如果现在按下返回按钮怎么办？ 什么都没有加载，因为浏览器仍然具有旧的index.js包，可以加载/index路由。 都是自动的！

This is not the only way to handle linking in Next.js, but I think it’s the simplest one.

这不是处理Next.js中链接的唯一方法，但我认为这是最简单的方法。

翻译自: https://flaviocopes.com/nextjs-link-two-pages/

next.js 页面跳转