React组件属性未在Next.js页面内呈现
可能是因为以下原因：
- 组件属性未正确传递：在React中，组件属性通过props进行传递。在Next.js中，需要确保组件属性被正确地传递给组件。可以通过在组件中使用props属性来访问传递的属性。
- 组件未正确引入：在Next.js中，需要确保正确引入组件并使用它。可以通过使用import语句引入组件，并在需要的地方使用该组件。
- 组件渲染位置错误：在Next.js中，组件需要在页面中正确的位置进行渲染。可以通过在页面中使用组件标签将组件渲染到页面中。
- 组件属性未正确使用：确保组件内部正确使用传递的属性。可以通过在组件内部使用props来访问传递的属性，并在组件中使用它们。
关于Next.js的更多信息，你可以访问腾讯云的Next.js产品介绍页面：Next.js产品介绍
在这个页面上，你可以了解到Next.js的概念、优势以及适用场景。同时，腾讯云也提供了与Next.js相关的产品，你可以根据具体需求选择合适的产品进行开发和部署。
相关·内容
我使用next.js创建一个静态页面，该页面以SSG模式输出。
我想使用react设备检测库来根据屏幕大小来确定输出组件。
由于页面是作为SSG创建的，即使在访问页面后更改了屏幕大小，组件也不会实时更改。
当然，如果您更改屏幕大小并重新加载它，它将被反映出来，但是我想实时地反映它。
如果没有使用next.js，并且只使用了react，那么每次都会呈现它，所以没有问题。这一点有解决办法吗？
最好的尊重。
消息来源在下面。
import { isMobile, BrowserView, MobileView } from "react-device-detect";
const
浏览 5提问于2021-11-15得票数 0
回答已采纳
所以我有一个使用Next.js的SSR应用程序。我使用的是一个使用WEB API的第三方组件，所以它需要加载到客户端而不是服务器上。我正在使用'two-pass‘渲染，我在这里读到了：
我试图弄清楚为什么当next.js页面状态中的'ssrDone‘状态改变时，整个<Layout>组件不必要地重新呈现，包括页面的页眉、页脚等。
我读过关于React.memo()以及利用shouldComponentUpdate()的文章，但我似乎无法阻止它重新呈现<Layout>组件。
我的<Layout> console.log消息触发两次，但<Th
浏览 154提问于2019-11-22得票数 4
回答已采纳
2回答
我试着用React和我的Express后端。目前，我使用React作为我的模板语言。
我的视图是.jsx文件。
/* Express */
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const session = require('express-session');
...
/* Express application parameters */
app
.set
浏览 3提问于2017-07-23得票数 1
回答已采纳
3回答
使用Next.JS选择V2.0
、、、、
我正在尝试使用React SelectV2.0和Next.JS，但是在服务器负载上，select元素不是样式化的，而是闪烁到样式的。
我尝试使用Next.JS的情感示例来服务器呈现情感样式()，但它似乎与我使用的样式-JSX冲突，并得到了错误StyleSheet: insertRule accepts only strings.。
我尝试使用下面显示的情感babel配置选项：
但这会导致整个页面被渲染，而不是样式化，然后闪烁到样式化。
有人知道如何在服务器呈现中使用React SelectV2 on Next.JS吗？
谢谢。
浏览 4提问于2018-06-19得票数 5
回答已采纳
我在Next.js项目中使用Next.js，这是在控制台中返回警告的简单代码：
import React, { useState } from "react";
import Cookies from "universal-cookie";
import styles from "../styles/Home.module.css";
export default function Home() {
const cook = new Cookies();
const [session, setSession] = useState(co
浏览 5提问于2021-02-25得票数 33
回答已采纳
我真的不知道Next.js上的这段代码有什么问题。index.js：
import { getUsers } from "../utils/users";
import React from "react";
Home.getInitialProps = async (ctx) => {
let elements = [];
getUsers().then((res) => {
res.map((el) => {
elements.push(el.name);
});
console.log(e
浏览 6提问于2021-07-21得票数 2
回答已采纳
1回答
我是相当舒服的反应和传递状态到组件和设置一个CSR应用程序，但我有点混淆了Next.js。我有时理解为SSR页面提供服务的好处，但我很难理解如何将这两者联系在一起。我正在制作一个基本的应用程序使用菲利普斯色调API。我认为我所处的位置：
I想提供一个SSR i getStaticProps()来更新仪表板上的版本，我希望允许用户与应用程序交互，并使用React的状态将信息传递给组件。
问题：
，我需要在此时呈现客户端页面吗？，我是否可以将状态添加到next.js文件中，让用户在同一页面上进行交互而不必呈现另一个页面？，如何将JSX添加到下一步，还是应该将Next.js更像节点服务器？
谢谢你的
浏览 2提问于2020-10-24得票数 1
当使用next.js (也就是react)时，我的表单的onSubmit方法永远不会被调用。它总是执行页面重新加载，这可以通过action form属性进行控制。
但是，我不希望表单刷新页面。也许这种行为是由于next.js服务器端渲染造成的？
这是我的标记：
<form action="/search" onSubmit={(e) => {
console.log("I am never called even if the action attribute is removed");
e.preventDefault();
浏览 7提问于2018-02-04得票数 2
回答已采纳
我有一个自定义的Card组件，它获得一个"onClick“类型，来处理点击，如下所示： import React from 'react';
import styles from './card.module.css';
interface Card {
onClick: React.MouseEventHandler<HTMLDivElement>;
}
const Card: React.FC<Card> = ({ children }) => {
return <div className=
浏览 109提问于2020-07-06得票数 0
回答已采纳
首先，我知道我不应该嵌套<p> 标签.
因此，我创建了一个Next.js应用程序，并且我有一个组件，用于设置富文本html，如下所示：
<Typography
dangerouslySetInnerHTML={{
__html: richText
}}
/>
react组件Typography最终只是一个p标记，因此可以简单地将其编写为：
<p
dangerouslySetInnerHTML={{
__html: richText
}}
/>
因此
浏览 1提问于2019-10-07得票数 10
我正在阅读关于如何使用流式服务器-使用React 18进行呈现的Next.js文档，还有一个关于数据获取的部分，内容如下：
目前只有客户端支持在悬念边界内获取数据。目前还不支持服务器端数据获取。
我理解数据只能从页面获取服务器端，然后通过支持将数据传递到组件。这是否意味着我们不能在包有getServerSideProps组件的页面中使用Suspense，还是不能将获取数据传递给这些组件？
浏览 8提问于2022-07-30得票数 0
我已经问了一个问题，我不知道如何用Next.js中的对象列表(类似于Next.js)为它们创建自己的布局。()
然后有人告诉我一个解决方案：()
不幸的是，我现在总是收到一个错误：
未处理运行时错误
错误:对象作为React子对象无效(找到:键为{__typename的对象，通道})。如果您打算呈现一个子集合，请使用数组。)
我将链接Git存储库和下面的代码片段。
代码片段：
存储库：
浏览 6提问于2022-01-13得票数 2
1回答
上下文
我正在与一个混合next.js和反应路由器应用程序工作。应用程序的一部分由react路由器(基于散列的)处理，部分由next.js路由器处理。有一些常见的组件使用与当前路由状态相关的钩子(例如useLocation)，如果缺少react路由器提供者包装器，这些组件就会崩溃。
问题
我想要编写一个钩子，返回useLocation (从react路由器-dom)或useRouter (从next.js)，这取决于它是否在当前上下文中检测到了react路由器提供者。
然后，我将在公共组件中使用这个钩子，这样不管它们在哪个上下文中使用，它们都能工作。
有一个类似的解决方案，用于检测是否使用us
浏览 2提问于2022-04-22得票数 1
我用Next.js / React制作了一个简单的web应用程序。其中一个功能组件(Next.js“页面”)返回一些JSX，其中包括一个标签，如
<script async src="https://example.com/file.js"></script>
但是，当我查看呈现页面的页面源时，我看到async被呈现为async=""。是否有一种方法可以强制属性/标记逐字呈现，而不是添加等号和引号？或者是为了这个特殊的标签，还是一般的？
编辑:这里是一个最小的JSFiddle，它显示了不受欢迎的行为：。这显然只是一个与Next.js无关的
浏览 3提问于2021-02-15得票数 3
回答已采纳
我是这个框架的新手，在通过互动学习之后，我有一些关于Next.js如何处理SEO问题的问题。
Next.js粗体功能是它在服务器端呈现React组件的能力，然而，据我所知，它只在服务器端呈现 first 请求，而其他请求将在客户端呈现，那么它如何在第一个假设为SEO friendly?Based、像google这样的爬虫器访问我们的站点、然后作为完整的HTML页面返回第一个响应，但是对于接收到的页面内的其他连续链接，它如何做得更好呢？它应该使用Javascript(这是SEO的主要致命弱点)执行客户端呈现，因此，除了第一个请求之外，CRA和Next.js没有什么区别，对吗？，如果前面的假设是正
浏览 3提问于2020-02-09得票数 3
回答已采纳
3回答
我试图复制的代码：
依赖关系：“@next/字体”："^13.0.5"，"eslint-config-next"："13.0.4"，"next"："13.0.4"，"react"："18.2.0"，"react-dom"："18.2.0"，"sharp"："^0.31.2"，“三”："0.109.0"，"react-globe"："5.0.2"，“ES6-吐温”："
浏览 4提问于2022-11-26得票数 0
1回答
我正在使用Next.js尝试一个侧边栏，但是代码是React格式的，我只是尝试复制它并将其转换为Next.js。它不会指向导航中的任何链接。
还有为什么内容没有显示在右边，能不能有人帮忙。我已经把_app.js文件放在了底部
import React from 'react'
import {SidebarData} from './SidebarData'
import {Row} from 'react-bootstrap'
import {useRouter} from 'next/router'
export defau
浏览 1提问于2021-01-25得票数 2
1回答
我正在写我的第一个反应应用程序使用Next.js，我遇到了一个困难。我的页面上有一张地图。Map是非常复杂的元素，我需要在其中插入react组件。所以情况是：
<body>
<SomeContext.Provider value={...}>
<React>
<Dom>
<TheMap />
</Dom>
</React>
</SomeContext.Provider>
</body>
Map只是一个包装元素，并且使用use
浏览 0提问于2021-05-26得票数 1
回答已采纳
2回答
我习惯于使用React Router，它提供了很大的灵活性，可以在页面上的不同位置从单个路由呈现多个组件，而无需重新加载整个页面。下面我给出了一个例子。我想在将来的项目中使用Next.js，但我找不到一种方法来重现这种类似应用程序的路由器功能，因为Next.js似乎只提供基于页面的路由，而不能控制在页面上重新呈现单个组件以响应路由更改。这似乎对网页来说很好，但对于复杂的应用程序来说就不好了，因为这些应用程序可能需要多次更改才能响应单个路线的更改。
在下面的示例中，我在CRA中使用React Router，基于我的链接配置在页面上并发呈现多个组件。根据我目前的理解，这似乎不可能使用Next.js
浏览 13提问于2021-02-18得票数 1
我正在尝试将一个脚本嵌入到我的next.js应用程序中，但是它在页面的末尾，而不是我放置的位置。
我已经采用了如何使用下一个脚本精确控制脚本标记插入位置的解决方案，但问题仍然存在。我还尝试将它嵌入到这里描述的应用程序脚本方法( )中，但是我得到了相同的结果。
页面中的helloworld.tsx如下所示：
import React, { useRef } from 'react'
import Script from 'next/script'
export const HelloWorld = () => {
const container
浏览 10提问于2022-11-11得票数 0
回答已采纳
1回答
我使用Next.js
我有这样的结构：
我需要为每个URL打开相同的组件，比如'，'，'‘这个组件：
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { withRouter } from 'next/r
浏览 3提问于2020-12-29得票数 1
2回答
在下面的示例代码中:它是React和Next.js
import App, { Container} from "next/app";
import React from "react";
class MyApp extends App{
render() {
const { Component } = this.props;
return (
<Container>
<p>Hey I am on every page</p>
浏览 6提问于2020-07-02得票数 0
回答已采纳
1回答
我正在导入next.js页面中的组件，并且没有收到任何错误，但是我无法看到组件的内容，并且它的行为就像组件剂量存在一样。
主页/ index.js
import Link from "next/link";
import Fragment from "react";
import mainHeroComponent from "../components/heroSection/mainherocomponent";
function HomePage(){
return (
<div>
hello
浏览 1提问于2022-04-23得票数 0
回答已采纳
4回答
我在我的Next.js应用程序中使用了react工具提示库。
我注意到，每次在访问使用工具提示的页面时刷新网站时，我都会得到一个错误：
react-dom.development.js:88 Warning: Prop `dangerouslySetInnerHTML` did not match.
CSS类在客户端和服务器上是不同的。
奇怪的是，当我从随机页面导航到使用react工具提示的页面时，我没有得到这个错误。
与工具提示相关的代码：
<StyledPopularityTooltipIcon src="/icons/tooltip.svg" alt="qu
浏览 8提问于2020-09-26得票数 12
回答已采纳
2回答
所以这是一个相当新的话题，React Server Components最近发布了，与SSR/Next.js相比，它对SEO有什么影响？
由于组件是在请求时在服务器上动态呈现的，所以它并不像Next.js那样是静态的，如果我使用它，搜索引擎会不会无法索引这些组件？
一个演示可以找到
我们可以在api.server.js中看到，
async function renderReactTree(res, props) {
await waitForWebpack();
const manifest = readFileSync(
path.resolve(__dirname,
浏览 1提问于2020-12-29得票数 6
我刚开始用react.js使用Next.js创建网站。我正在尝试将模块"react-insta-stories“()。只有他指责文档没有定义。我知道你在这里也有类似的问题，但我想问你一些不同的，更一般的问题...因为我想在这个项目中使用几个很棒的模块，而next.js似乎让它变得很困难。有些模块只与“浏览器”对话。问题是。在javascript实例化我的应用程序之后，next.js没有问题，我可以使用任何模块吗，即使是来自react.js的模块？有没有人知道我如何把这个react-insta-stories放到我的项目中？因为我尝试了一些解决方案，但我认为它们超出了我的知识范围。
浏览 0提问于2020-07-22得票数 0
我正在将现有的React应用程序转换为使用Next.js，但我在生产版本上遇到了问题。我正在使用情感来添加一个用于样式的css道具。我的应用程序中的页面呈现良好，直到它们预取链接，在这一点上样式从当前页面消失。也有一些奇怪的间歇性行为-有时当我刷新页面时，我可以在页面之间导航，而样式不会消失，但最终它们会再次消失。检查组件显示css属性的值没有改变，但是样式并没有应用到实际的元素。有没有人经历过类似的事情，或者可以给我指出导致这种情况的原因？
浏览 0提问于2021-02-25得票数 1
我在应用程序中使用Next.JS，在应用程序的所有页面上都需要一个Navbar组件，而Navbar呈现必须从数据库中获取的数据(特别是product-categories)。
我希望这个组件是服务器端呈现的，但是由于Next.JS只支持页面级getServerSideProps，而不支持组件级Navbar，所以我似乎必须在所有页面上使用getServerSideProps来显示这个Navbar，并在每个页面中编写相同的API请求，从而在几个页面中重复进行大量逻辑和API调用。
在研究如何解决这个问题时，我遇到了React组件，并想知道这对于这个场景是否是一个有效的解决方案，但是由于我对这个概念
浏览 8提问于2022-06-11得票数 1
回答已采纳
我目前正在将我的React.js项目转换为Next.js。
不过，目前我在道具上遇到了一些问题。
以前，我在app.js上进行了API调用，然后将其传递到navbar中，以便在搜索表单中使用。
对于Next.js，没有真正的选项，因为_app.js文件中的API调用被阻塞。这就是我的layout.js (Nav/Footer)的地方。
我正在考虑的选项：
将index.js文件的约定更改为与app.js而不是home.js页面类似。
将布局包装在每一页上，而不是包装_app.js，并在每一页上调用stock。
我觉得有一种更好的方法，只需调用API一次，并将其传递给所需的子程序
浏览 4提问于2021-09-18得票数 1
回答已采纳
2回答
我在一个DateRangePicker项目中使用来自的next.js。
您可以在他们的上看到预期的行为:如果您从右边的月份中选择任何日期，则月份将保持不变。。
但是在我的项目中，从右到左的月份跳到了日期选择()。
通过从演示页面复制代码，我制作了一个简单的：
import { addDays } from "date-fns";
import { useState } from "react";
import { DateRangePicker } from "react-date-range";
import "react-date-r
浏览 6提问于2021-01-22得票数 8
2回答
我试图在Next.js中每3秒选中一次的输入单选按钮之间切换，它从case0切换到case1，从case1切换到case2，但不是从case2切换到case0。我在React和Next.js方面有中等水平的知识。 import React, { useState, useRef } from 'react';
function Abb() {
let count = 0;
const [q1, setq1] = useState(false);
const [q2, setq2] = useState(false);
const [q3, setq3] =
浏览 38提问于2021-04-10得票数 1
回答已采纳
我有<MobileLayout />，<DesktopLayout />。我正在使用Next.js进行服务器端呈现。我注意到有很多著名的ui库在语义-UI-React中都有像<Respnosive />组件这样的移动检测组件。但是所有这些都是客户端方法，不能在SSR上正常工作。
我读了一些文件，结论是我应该检查服务器端的user-agent，req.headers。在Next.js中，什么是正确的方法来检测设备，并以适当的方式呈现MobileLayout / DesktopLayout中的一个
我试过什么
在_app.js中
import isMobile
浏览 3提问于2020-06-02得票数 5
我正在查看React框架Next.js，看看它是否与我的下一个应用程序SPA最匹配，ASP.NET核心将是后端。我以前使用过create-react-app，所以我想将Next.js与它进行比较。我们的目标不是Server Side Rendering(SSR)。我们的项目将是管理类的项目和SEO并不真的重要。我们肯定需要表演。我们不能使用静态生成，因为我们需要为每个页面加载最新的数据。我们也需要废品。
我所读到的关于Next.js的主要好处是：
SSRFile Routing全文堆栈开发--可以与it一起使用后端(Node.JS)。
从这些提到的功能，文件路由将只对我们有用，我相信，因为我们
浏览 7提问于2021-07-14得票数 7
回答已采纳
我使用的是next.js 10。我想在页面挂载后填充deliveryAddressArray。我在这里找不到我错过的东西。 这是我的address.js页面 const [deliveryAddressArray, setDeliveryAddressArray] = useState([]);
useEffect(() => {
async function getDeliveryAddressArray() {
try {
const response = await axios({
method: "ge
浏览 20提问于2021-04-13得票数 0
我使用的是语义-UI React和Next.JS，但它出现在断点< 768px时，我的主组件在刷新浏览器时完全崩溃。我知道，因为它是一个react/next.js应用程序，他们负责路由，但我想我想知道如果用户碰巧这样做了怎么办？
它不会发生在我的/login，/register或/profile路线上
所以我检查了一下来解决我的问题-- ，在那篇文章中，它指向了；对为什么会发生这种情况的解释以及解决这个问题的药方似乎不适合我的情况。
与呈现()相同，但用于水合物容器，其HTML内容由ReactDOMServer呈现。React将尝试将事件侦听器附加到现有标记。
React期望呈现的内容
浏览 44提问于2019-10-08得票数 6
2回答
next.js应用程序的性能改进
、、、、
我有一个使用next.js的应用程序，我想用代码分割来减少我的包，这样页面就可以按需加载。
然而，我没有办法做到这一点，因为我不在乎我的路线。作为使用react-router的一个例子，我们可以在路由上使用dynamic imports。
有人知道解决这个问题的办法吗？
浏览 3提问于2021-08-01得票数 0
回答已采纳
在我的React中，屏幕顶部有一个TextInput和一个TouchableOpacity组件，由于某些原因不能单击。在我做这个项目时，它在某个时候起了作用，但由于某些原因，它不再识别单击或关键事件。构成部分如下：
import React, { Component } from "react";
import {
AsyncStorage,
Dimensions,
FlatList,
Platform,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View
} from "react-native";
imp
浏览 0提问于2018-04-01得票数 2
我有一个Next.js应用程序
这是我的页面/组件之一
import React from "react";
import { SomeLocalStorageComponent } from "some-external-lib";
const MyComponent = () => {
const isBrowser = typeof window !== "undefined"
{
if (isBrowser) {
<SomeLocalStorageComponent></SomeLocal
浏览 5提问于2022-08-25得票数 0
回答已采纳
我正试图为一个Next.js项目建立故事簿。我有一个组件，用于从呈现Next.js标记。我的问题是，当我加载这个组件时，Storybook会抛出以下错误：
Cannot read property 'pageLoader' of null
at Link.handleRef
要让Storybook使用Next.js路由，特别是呈现Link标记，您需要做什么？
更新:导致错误的代码：
// button-component.js
import Link from 'next/link.js';
import t from 'prop-types
浏览 1提问于2020-01-13得票数 7
1回答
我想把价格从英镑兑换成比特币，我正在用来实现。使用下面的代码，我可以在控制台中记录比特币的价格，但是如何在我的Next.JS应用程序的页面上显示结果。
谢谢你找我！
import { fiatToBitcoin } from 'bitcoin-conversion';
import React, { useState } from 'react'
export async function getBitcoinPrice(price) {
const paymentInBtcFromGbp = await fiatToBitcoin(price, '
浏览 4提问于2021-12-17得票数 -1
回答已采纳
我是Next.js新手，我正在使用它在登陆页面上执行服务器端呈现。
登陆页面有:对每个用户相同的一个通用组件和针对每个用户的一个特定组件。
是否可以在通用组件上执行服务器端呈现，在特定组件上执行客户端呈现？
谢谢。
浏览 19提问于2022-01-17得票数 0
回答已采纳
为了改进TTFB (时间到第一个字节)，“PageSpeed洞察”建议使用ReactDOMServer.renderToNodeStream()，但我不知道如何实现它。我读过的文章，但我不知道如何使用它。另外，我读了，但是在我的next.js应用程序中，没有webpack.config.js文件。如果我不能将react renderToNodeStream与Next.js一起使用，如何在Next.js中覆盖renderToNodeStream的影响？
浏览 10提问于2020-04-19得票数 9
回答已采纳
1回答
视图源中的API数据
、、、
我使用next.js在服务器端呈现react代码，但是当我查看页面的源代码时，我可以看到整个API数据和redux存储数据。 这对所有的SSR代码来说都是通用的，还是我做错了什么？
浏览 12提问于2019-01-24得票数 1
我正在构建Next.js应用程序，当我安装/导入 (用于生成占位符图像)时，我得到以下错误：Module not found: Can't resolve 'child_process'
节点v14.18.0
Next.js v11.1.2
Plaiceholder v2.2.0
夏普0.29.2
我理解这个错误消息，这意味着webpack5试图绑定客户端不可用的节点包。但我不清楚它为什么要这么做。我没有定制webpack的任何一个吐露，我也找不到任何提到这个问题在柏拉图博士。我该怎么解决呢？
注意:我希望在构建过程中创建base64数据URL，
浏览 8提问于2021-11-13得票数 2
回答已采纳
1回答
我们在Next.js项目中使用react-responsive-carousel。当我们用Image替换img来优化缩略图的大小时，缩略图消失了。你知道为什么吗？
浏览 4提问于2021-02-12得票数 2
1回答
请您解释一下Next.js中客户端和服务器端的概念，就像他们在文档中提到的那样。我所知道的是，Next.js工作在react上，它是客户端并在浏览器中运行，服务器端是指api (后端)。任何帮助都将不胜感激。谢谢
来自Next.js文档：
在服务器端构建时调用此函数.它不会在客户端被调用，所以您甚至可以直接进行数据库查询。见“技术细节”一节。
export async function getStaticProps() {
const postsDirectory = path.join(process.cwd(), 'posts')
co
浏览 4提问于2021-01-31得票数 0
在我正在工作的Next.js中，您可以在路由/posts/[id].tsx中得到一个帖子，我正在使用react query来发出get请求。我得到了postId
康斯特{id}=router.query
但是每次我输入页面时，它都会用undefined将请求发送到服务器，而且，当我们输入一个页面时，你们知道如何禁用发送两次请求的React属性吗？我认为这是一种浪费处理(如果我错了，请纠正我)，谢谢你阅读到这里！
浏览 24提问于2022-11-26得票数 0
我想知道dynamic import (next.js特性)和await import之间的区别。
我在网上找不到关于这种差别的解释。
我知道，您只能使用dynamic import导入React Components，而不能使用库。
但是为什么我要使用dynamic import而不仅仅是await import呢？
谢谢
浏览 2提问于2020-12-19得票数 3
回答已采纳
1回答
我目前正在更新一个使用Next.js的React项目。我偶然发现了一个关于动态路由的小问题，到目前为止，我还没有在网上找到任何解决方案。
我有许多信息页面，使用相同的组件，并显示不同的内容，基于段塞。使用react-router，可以如下所示：
path: /:infoPage(about-us|terms|privacy|contact|faqs)
/about-us, /terms, /privacy, /contact, /faqs
到目前为止，对于Next.js，我认为我应该使用如下所示的动态路径。唯一的问题是URL现在将有/infoPage/___ - /infoPage/abou
浏览 16提问于2020-11-05得票数 2
我正在使用Next.js开发一个个人博客。我根据分页的页面查询从我的API中获取帖子，然后像这样循环遍历项目：
let content = (
<ul>
{props.posts.map((post) => {
return <li key={post.id}>{post.title}</li>;
})}
</ul>
);
return (
<div className="container">
<div className="posts
浏览 9提问于2021-05-22得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
