next.js - Next JS 和服务器端渲染的动态路由
问题描述
我正在为 NEXT JS 中的每个共同基金开发动态路线。基金页面的 URL 是 domain.in/mutual-funds/[fund]。我希望页面的标题作为基金名称(除了 url 的 slug 之外什么都没有)。但是当我转到基金网址时,getServerSideProps 不会立即获取查询参数。所以标题标签没有加载基金名称。
import { NextSeo } from "next-seo";
const fund = props.query.fund;
const [title, setTitle] = useState("");
const titleCase = (str) => {
var str1 = str.replaceAll("-", " ");
var splitStr = str1.toLowerCase().split(" ");
for (var i = 0; i < splitStr.length; i++) {
splitStr[i] =
splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);
}
return splitStr.join(" ");
};
useEffect(async () => {
setTitle(titleCase(fund));
},[])
export async function getServerSideProps(context) {
return {
props: { query: context.query },
};
}
在返回语句中
<NextSeo title={title} />
解决方案
推荐阅读
- laravel - spatie/sitemap 不会安装在 Godaddy 服务器上的 laravel8 中
- rest - Flutter 转换数据 Iso8601
- python - 当我在函数中使用 dateutil.parser.parse() 时,它返回一个列表而不是 datetime 对象?
- javascript - 在消息中获取所有被 ping 的用户,然后检查他们是否都有角色
- javascript - masonry (macy.js) 不适用于 ie 11。它在触发“检查模式”后工作
- android-studio - Android Studio 输入/退格键不起作用
- android - Android AOSP 构建错误 mkbootimg --kernel out/target/product/xiaomi/kernel 而不是 mkbootimg --kernel out/target/product/xiaomi/boot.img
- python - Python:如何使用 pandas 错误保护读取 csv/xlsx 文件
- javascript - 显示表格后如何停止添加表格
- ffmpeg - 找不到用于在视频中添加水印的 FFMPEG 覆盖