文章目录加载中
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