文章目录加载中

NextJS 动态路由

# 路由

  • 支持动态路由
  • 提供了 next/link
  • 支持 Shallow routing
import React, { useState, useEffect } from "react";
import Link from "next/link";
import Router, { useRouter } from "next/router";
const HomePage = () => {
  const router = useRouter();
  useEffect(() => {
    router.push("/home?counter=10", undefined, { shallow: true });
  }, []);
  useEffect(() => {
    // The counter changed!
  }, [router.query.counter]);
  return (
    <div>
      <div>Home Page!</div>
      <Link href="/posts/[id]" as="/posts/1">
        <a>跳转到动态路由</a>
      </Link>
      <Link href="/blog">
        <a>next/router的Link标签:Blog</a>
      </Link>

      <a href="/blog" target="_self">
        普通a标签:Blog
      </a>
      <button onClick={() => Router.push("/blog")}>
        next/router编程式跳转:Blog
      </button>
    </div>
  );
};
export default HomePage;

注意:

  • 对于 next/link 来说,既可以在 page 中使用 useRouter 返回 obj,也可以直接使用 Router。
  • 对于 next/link 来说,as 用于动态路由跳转
  • 动态路由的 id 信息和浏览器中路由参数的信息,都在 router.query 中(这地方设计不是太规范)

# Dynamic Important 动态引入

支持 import() 动态引入模块。它是在 ssr(server 端),或者在 ssr/static generation 的 client 端。

请注意:

  • client 渲染的,源代码中不会有相关 dom 结构以及 content。类似于 spa 应用交由 js 托管。
  • static generation 使用 server 端引入,会报 warning(它和直接引入效果一样,都会被打包到 dom 中,没必要用这种方式)。
  • 组件不能使用 server 端对应的三个函数。
import Header from "./../components/header";
import dynamic from "next/dynamic";
const DynamicComponent = dynamic(
  () => import("./../components/header").then((mod) => mod),
  { ssr: false }
);
function Blog({ posts }) {
  return (
    <div>
      <Header />
      blog content...
      <DynamicComponent />
    </div>
  );
}

# 默认页面和组件

默认页面:

  • _app.js
  • _document.js
  • _error.js

默认组件: <Head>

这些都可以根据情况自定义,尤其是 Head ,可以优化不同页面的 seo。

# 自带 api

用处不大,前后端分离比较好。

本文来自心谭博客:xin-tan.com,经常更新web和算法的文章笔记,前往github查看目录归纳:github.com/dongyuanxin/blog