文章目录加载中

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

路由

Dynamic Important 动态引入

默认页面和组件

自带 api