大佬教程收集整理的这篇文章主要介绍了如何从 contextApi 为 nextjs 中的一组特定路由提供上下文并通过链接保留路由状态？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在将 contextAPI 与 nextJs 一起使用，但在为某些路由提供上下文时遇到了一些问题。我能够使上下文仅可用于几条路由，但是当我通过链接从一个路由转换到另一个路由时，我最终会丢失应用程序的状态。
我的 pages 文件夹中有三个文件：
index.tsx@H_874_6@，
Dashboard/index.tsx@H_874_6@ 和
SignIn/index.tsx@H_874_6@。
如果我在文件 Dashboard/index.tsx@H_874_6@ 和 SignIn/index.tsx@H_874_6@ 中导入提供程序并通过按下 next/link@H_874_6@ 中的链接组件从一个页面转到另一页面，则整个状态将设置回初始状态。
Dashboard/index.tsx@H_874_6@ 文件的内容
import React from 'react';
import Dashboard from '../../app/vIEws/Dashboard';
import { authprovIDer } from '../../contexts/auth';
const Index: React.FC = () => (
<authprovIDer>
<Dashboard />
</authprovIDer>
);
export default Index;
@H_874_6@这是 SignIn/index.tsx@H_874_6@ 文件的竞争：
import React from 'react';
import SignIn from '../../app/vIEws/SignIn';
import { authprovIDer } from '../../contexts/auth';
const Index: React.FC = () => (
<authprovIDer>
<SignIn />
</authprovIDer>
);
export default Index;
@H_874_6@vIEws 文件夹是我创建将要渲染的组件的地方。
文件 vIEws/SignIn/index.tsx@H_874_6@ 的内容是：
import React,{ useContext } from 'react';
import link from 'next/link';
import { AuthContext } from '../../../contexts/auth';
const SignIn: React.FC = () => {
const { signed,signIn } = useContext(AuthContext);
async function handleSignIn() {
signIn();
}
return (
<div>
<link href="Dashboard">Go BACk to Dashboard</link>
<button onClick={handleSignIn}>Click me</button>
</div>
);
};
export default SignIn;
@H_874_6@文件vIEws/Dashboard/index.tsx@H_874_6@的内容是：
import React,{ useContext } from 'react';
import link from 'next/link';
import { AuthContext } from '../../../contexts/auth';
const Dashboard: React.FC = () => {
const { signed,signIn } = useContext(AuthContext);
async function handleSignIn() {
signIn();
}
return (
<div>
<link href="SignIn">Go BACk to sign in page</link>
<button onClick={handleSignIn}>Click me</button>
</div>
);
};
export default Dashboard;
@H_874_6@我可以访问 /Dashboard@H_874_6@ 和 /SignIn@H_874_6@ 中的上下文，但是当我按下链接时，状态又回到最初的状态。我发现整个提供程序都被重新渲染，因此新状态成为初始状态，但我无法以“最佳实践方式”解决这个问题。
如果我将提供者放在 _app.tsx@H_874_6@ 中，我可以在页面之间转换时保持状态，但我最终也会将此状态提供给 /@H_874_6@ 路由，这是我试图避免的。
我可以通过执行以下操作来解决这个问题，但它似乎对我来说并不是最好的解决方案。
我从 Pages/SignIn/index.tsx@H_874_6@ 和 Pages/Dashboard/index.tsx@H_874_6@ 中删除了提供程序，并为 _app.tsx@H_874_6@ 文件使用了以下代码段：
import React from 'react';
import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import { authprovIDer } from '../contexts/auth';
const App: React.FC<AppProps> = ({ Component,pageProps }) => {
const router = useRouter();
const authprovIDerRoutes = ['/SignIn','/Dashboard'];
return (
<>
{authprovIDerRoutes.includes(router.pathName) ? (
<authprovIDer>
<Component {...pageProps} />
</authprovIDer>
) : <Component {...pageProps} />}
</>
);
};
export default App;
@H_874_6@有人有更好的解决方案吗？
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）
以上是大佬教程为你收集整理的如何从 contextApi 为 nextjs 中的一组特定路由提供上下文并通过链接保留路由状态？全部内容，希望文章能够帮你解决如何从 contextApi 为 nextjs 中的一组特定路由提供上下文并通过链接保留路由状态？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。