Next.js:导航到其他页面而不重新呈现

Next.js 是一个流行的 React 框架，它提供了一种简单且高效的方式来构建服务器渲染的 React 应用程序。Next.js 具有导航到其他页面而不重新呈现的能力，这是通过使用 Next.js 的客户端路由功能实现的。

Next.js 的客户端路由功能基于 HTML5 的 History API，它允许在不刷新整个页面的情况下导航到其他页面。这种无刷新导航的优势在于提供了更快的用户体验，因为只有页面的部分内容需要更新，而不是整个页面重新加载。

应用场景：

多页面应用程序：Next.js 的客户端路由功能非常适合构建多页面应用程序，用户可以在不刷新整个页面的情况下快速导航到其他页面。
单页面应用程序：Next.js 的客户端路由功能也可以用于构建单页面应用程序，通过动态加载页面内容，实现无刷新的页面切换效果。

推荐的腾讯云相关产品：腾讯云提供了一系列与 Next.js 相关的产品和服务，可以帮助开发者更好地构建和部署 Next.js 应用程序。

云服务器（CVM）：腾讯云的云服务器提供了稳定可靠的计算资源，可以用于部署 Next.js 应用程序的后端服务。产品介绍链接：https://cloud.tencent.com/product/cvm
云数据库 MySQL：腾讯云的云数据库 MySQL 提供了高性能、可扩展的数据库服务，可以用于存储 Next.js 应用程序的数据。产品介绍链接：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：腾讯云的云存储服务提供了安全可靠的对象存储，可以用于存储 Next.js 应用程序的静态资源文件。产品介绍链接：https://cloud.tencent.com/product/cos
云函数（SCF）：腾讯云的云函数服务提供了无服务器的计算能力，可以用于处理 Next.js 应用程序的后端逻辑。产品介绍链接：https://cloud.tencent.com/product/scf

总结： Next.js 是一个强大的 React 框架，它提供了导航到其他页面而不重新呈现的能力，通过使用 Next.js 的客户端路由功能，可以实现无刷新的页面导航，提供更好的用户体验。腾讯云提供了一系列与 Next.js 相关的产品和服务，可以帮助开发者更好地构建和部署 Next.js 应用程序。

Next.js:导航到其他页面而不重新呈现

reactjs、next.js

在我的应用程序中有两个页面： /pages [page].js 这两个文件共享相同的内容。我这样做是为了处理"/“和其他urls上的传入请求，比如"/foo”和"/bar“。当我通过"/foo“和"/bar”之间的链接导航时，我使用了路由器标志shallow=true，这不会导致重新渲染。但是当我导航到索引页时，完整的内容正在重新<em

浏览 18提问于2021-10-14得票数 0

1回答

在Next.js / Redux页之间切换时，页面会不断重新绘制

redux、next.js

我用翻译问一个问题，因为在一个俄语网站上，我不希望得到帮助。对不起我的英语。在使用Redux的必要性方面，我遇到了一个问题。我重新做了我的临时安排和布局。但是现在，当您浏览页面时，整个区域将被重新绘制。

浏览 1提问于2020-06-20得票数 0

回答已采纳

1回答

接下来，getInitialProps内部的JS代码在页面重新加载后不执行

reactjs、react-redux、next.js、server-side-rendering

我面临一个问题，在页面上重新加载或打开直接链接(例如。我的getInitialProps不执行，但是如果我使用来自next/link的<Link>打开这个页面，它工作得很好。客户页面代码：import { useDispatch, useSelector } from

浏览 1提问于2020-04-08得票数 0

回答已采纳

1回答

页面上的查询，一旦导航回页，就不会重取

graphql、next.js、apollo-client、graphql-codegen

在我的nextjs页面中，我有下面的钩子(使用graphql-codegen生成)来获取graphql查询。properties || [])], }, }, },我遇到的问题是，在这个页面上，我使用variables更新了useGetShortlistQuery上的refetch，而refetch又更新了data。但是，如果我导航到另一个页面，那么使用这个组件返回到这个<em

浏览 5提问于2022-05-09得票数 0

1回答

getServerSideProps是运行页面中的每个请求，还是只为http请求运行？

javascript、next.js、server-side-rendering

getServerSideProps是在页面中运行每个请求，还是只为HTTP运行？

浏览 19提问于2022-10-12得票数 -1

1回答

能否将SSR/SSG和CSR与Next.js相结合？

next.js

为了直接访问第1页()或第2页(页面2)，我希望使用SSG呈现页面并优化加载时间&SEO.(如果用户从第1页到页面2)，我想用CSR呈现第2页，这样我就可以动画化过渡了。这与Next.js是可能的吗？

浏览 4提问于2020-11-18得票数 1

1回答

您应该如何在使用getServerSideProps进行路由转换时获取客户端数据？

next.js

Next.js 9.3引入了getServerSideProps。在中现在写着：如果您使用的是Next.js 9.3或更高版本，我们建议您使用getStaticProps或getServerSideProps而不是getInitialProps。在初始服务器呈现之后，如果路由更改，getInitialProps将在客户端上运行。那么，9.3中引入的新方法如何解释这个非常基本的用例呢？

浏览 7提问于2020-04-05得票数 5

回答已采纳

1回答

如果页面中既没有创建getStaticProps也没有创建getServerSideProps，那么如何呈现页面？

next.js、server-side-rendering

我有一个用Next.js构建的现有项目，但这两种呈现方法中没有一种是在某些页面中定义的。如果getStaticProps和getServerSideProps都不存在，这些页面是如何呈现的？

浏览 4提问于2022-01-05得票数 2

回答已采纳

1回答

阿波罗客户端useQuery在Next.js router.push上进行不必要的重取

javascript、typescript、next.js、graphql、apollo

我正在处理一个问题，当调用Next.js的router.push ()时，router.push客户端钩子中的查询会不必要地重新运行。</button> );有人知道如何确保阿波罗查询不被重新运行吗？

浏览 3提问于2022-06-08得票数 0

回答已采纳

2回答

AddThis:附加到<body>的<script>标签仅在第一个页面加载时有效，不会在整个应用程序ReactJS中持续存在

javascript、addthis

当我刷新页面时，div类按预期显示，但当我转到另一个组件并返回时，该div不会出现。有什么见解吗？

浏览 44提问于2019-03-08得票数 1

1回答

为什么在调用getStaticProps时在Next.js中生成一个JSON文件？

javascript、next.js

这里是Next.js新手。我在上读了一遍，发现如下：我的问题是，为什么需要这个JSON文件？如果在构建时使用getStaticProps提供的支持将页面呈现为静态HTML，那么为什么<em

浏览 5提问于2022-09-01得票数 3

回答已采纳

2回答

nginx -如何让代理传递在页面上呈现子域？

nginx、nginx-config、vercel、nginx-location、proxypass

在Vercel托管的单独服务器上，我们运行了一个Next.js应用程序。我们已经将Vercel应用部署到主域的子域：，我们的域由Cloudflare托管，我们通过添加CNAME记录将其链接到Vercel，如下所示：我想做的是让我们的主要职务页，而不是呈现的工作页的因此，用户进入，但Next.js应用程序与匹配路径呈现相反，同时保持"employbl.com/jobs“作为URL。这是我们目前使用proxy_pass的Nginx配置。不幸的是，当我使用这个

浏览 30提问于2022-09-02得票数 0

回答已采纳

1回答

Vercel/Next.js (seeminlgy)随机返回带有{"notFound"：True}的404 s

reactjs、webpack、next.js、vercel

简介注意：当单击控制台中的一个损坏链接( .json )时，我将得到一个404：导航到客户端已损坏的页面也会给出404 然而，当curl -I -L时，我会得到一个200

浏览 13提问于2022-03-07得票数 7

回答已采纳

1回答

基于Next.js router.query的渲染内容会导致重呈现和闪烁？

reactjs、next.js、url-routing

我有一个页面，它使用router.query来确定要呈现的内容。 <h1 className={styles.title}> Welcome to <a href="https://nextjs.org">Next.jsfoo=bar，您将看到初始<e

浏览 9提问于2021-12-10得票数 1

1回答

在我的nextjs项目中导航时出现时间问题

javascript、reactjs、next.js、server-side-rendering

我对请求进行了console.log，注意到对我的API和索引调用了两次，但我不确定这是不是一个问题。Nav> </Navbar> );} export default Header; 页面

浏览 28提问于2020-03-22得票数 0

1回答

角路由器导航和重新加载需要呈现组件一次，但呈现两次

angular、angular2-routing

我有一个特殊的条件，我需要重定向到一个url和重新装载。我在路由器上使用这个方法：this.reload(); });问题是：我在开始时被导航到登录，然后页面被重新加载，这是默认行为。必需的输出

浏览 2提问于2017-09-12得票数 2

回答已采纳

1回答

如何使用NextJS预录制来解决“无法读取未定义的属性的标题”？

javascript、reactjs、next.js、server-side-rendering

为了在我的Next.js应用程序上发布一篇特定的文章，我预先录制了这个页面：import Link from 'next/link';TypeError: Cannot read property 'title' of undefined

浏览 1提问于2021-04-09得票数 2

回答已采纳

2回答

即使我导航到其他页面并返回，也要将数据保留在应用程序中

reactjs、firebase、next.js

我正在对Firestore使用React和Next.js。在一个页面上，我只在页面呈现后才使用useEffect从Firebase获取数据。但是由于get的开销很大(读取次数很多)，所以我希望即使在用户导航到其他页面并返回到这个页面时，也要持久化获取的数据，这样我就不需要再次获取。我该怎么做呢？谢谢!

浏览 18提问于2021-06-16得票数 0

回答已采纳

1回答

如何处理nextjs中的电话号码、地址和电子邮件？

next.js、mailto

目前，我正在使用nextjs/Link处理tlf号码和电子邮件，在我的页脚的联系人部分。当用户单击相应的链接时，我使用href属性将用户发送到mailto或直接发送到google地图。我读到，为此目的使用next/link并不是一个好的实践。我应该用什么代替？下面是我的代码片段： contact: ContactType; return ( <a c

浏览 7提问于2022-04-22得票数 0

1回答

Next.js清除查询参数

javascript、reactjs、next.js

我有一个用Next.js写的应用程序。我有一个类似my-page.jsx的页面。当我导航到/my-page?x=1&y=2时，页面将正确呈现并读取查询参数。但是URL ?这是一个问题，因为当我离开页面，然后用浏览器" back“按钮返回时，查询-params就不再存在了，它们也不会被读取。所以页面是不同的。如何防止Next.js从URL中删除查询参数？

浏览 4提问于2020-10-06得票数 0

点击加载更多