2
我遵循 redux 示例，并在共享组件内渲染 iframe。但每次路由更改时，Provider 组件似乎总是重新渲染应用程序并触发 iframe 重新加载。我想让它坚持下去。是否可以？
Q
[vercel/next.js]在路线导航之间保留 React 状态
A
回答
7
目前很难做到这一点。我们只保留模块状态。当我们切换页面时，它会渲染新的 React 组件（页面）。所以，这就是我们看到这一点的原因。
目前，我希望我们可以用自定义文档做一些事情。
6
也许将当前状态保存在本地存储中，如果存在，则从下一页加载它？
0
@mike3run 这不是@viankakrisna 所问的。我们有 JS 模块级别的持久性。所以不需要使用本地存储。
但@viankakrisna 正在询问 React 状态。因此，公共组件内的 iframe 再次重新渲染。
6
@arunoda我正在使用自定义文档测试你的建议：
<html>
<Head>
<link rel='stylesheet' href='/static/style.css' />
</Head>
<body>
<Provider store={this.store}>
<div>
<Navbar />
<YouTubePlayer />
<Main />
</div>
</Provider>
<NextScript />
</body>
</html>但出现此错误：
Invariant Violation: Could not find "store" in either the context or props of "Connect(Component)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Component)".页面似乎看不到提供者。
7
你确定他问的是 React 状态与可重用的全局存储吗？
2
@rauchg我是根据这个评论想到的：
每次路线更改时都会重新渲染应用程序并触发 iframe 重新加载。
不管怎样，@viankakrisna 你能给我们发送一个示例仓库吗？也许我们可以考虑做点什么。
4
@rauchbg 是的，我说的是反应状态。抱歉，如果还不够清楚。 @arunoda，我回家后就可以了。就像你说的，我认为问题是它总是在路由更改时呈现新的 React 组件。我们可以将页面视为文档的子项吗？因此，不应在每次路由更改时重新创建主 shell。
PS：抱歉我的英语不是母语:(
8
@viankakrisna 让我们看看我们可以用这个例子做什么。
3
由于不活跃而关闭。
8
Next.js 非常适合 SSR 和代码分割。它正在成为一个令人惊叹的框架。
但我在制作音频播放器网络应用程序时遇到了与@viankakrisna 相同的问题。我希望播放音乐的 AudioComponent 保持其状态，而用户浏览流派和艺术家以将它们添加到他的播放列表中。
如果你们能为此做点什么，那就太好了。
作为参考，这里是播放器应用程序的 github 存储库： nextjs-audio-player
0
@adarshsingh1407 现在，您可以通过将所有这些功能包装到一个页面中并使用我们的自定义路由 API 来执行自定义 URL 来实现此目的。
0
@arunoda所以我会有一个页面有条件地呈现来自的视图render？就像是，
render () {
if (condition) {
return this.renderThis()
} else {
return this.renderThat()
}
}？
您能否详细说明一下自定义 API 路由的含义以及我们如何使用 Next 来实现这一目标？
7
1
您有使用自定义快递服务器解决此问题的方法吗？我使用这样的路由：server.js：
const webRoutes = require('./app/routes/web')(server, app);
server.get('*', (req, res) => handle(req, res));路线.js：
// import controller middlewares
const authController = require('../controllers/authController');
// define the actual page files for each route
const render = {
index: app => (req, res) => app.render(req, res, '/index'),
create: app => (req, res) => app.render(req, res, '/assignment/create'),
preview: app => (req, res) => app.render(req, res, '/assignment/preview'),
};
// link url to pages, apply middlewares where needed
module.exports = (server, app) => {
server.get('/dashboard', authController.login, render.index(app));
server.get('/create', render.create(app));
server.get('/create/assignment', render.create(app));
server.get('/preview/assignment', render.preview(app));
};通过这种方式路由，我可以将快速中间件应用到我的路由中。但每次我加载新页面时，我的 redux 状态都会消失
7
嘿嘿！
@timneutkens 将其添加到 v6 的清单中可能会很有趣;)
6
我相信现在使用自定义App.js组件应该可以工作。
0
例子存在吗？
1
那么，如果我说这目前还不可能的话，我说得对吗？
0
Next.js 非常适合 SSR 和代码分割。它正在成为一个令人惊叹的框架。
但我在制作音频播放器网络应用程序时遇到了与@viankakrisna 相同的问题。我希望播放音乐的 AudioComponent 保持其状态，而用户浏览流派和艺术家以将它们添加到他的播放列表中。
如果你们能为此做点什么，那就太好了。
作为参考，这里是播放器应用程序的 github 存储库： nextjs-audio-player
@adarshsingh1407 您是否在页面之间导航时继续播放音乐感到安慰？
1
我想出了一个解决方案。它有一些问题但确实有效。这是要点 - https://gist.github.com/GusRuss89/df05ea25310043fc38a5e2ba3cb0c016
6
如果您使用此处App描述的自定义组件并跟踪您的状态/从该组件渲染您的提供程序，则状态将在整个路线导航中持续存在，因为该组件将在这些路线更改期间保持渲染状态并且不会被卸载。直接回答你的问题，@johansedgeware：App
那么，如果我说这目前还不可能的话，我说得对吗？
可以使用自定义App组件并在该组件的上下文中初始化/维护状态。
3
我用这个解决了类似的问题：
https://nextjs.org/docs/basic-features/layouts
只需制作一个 HOC 包裹整个 _app 并在 HOC 中设置您想要执行的操作即可。