Next.js 高级客户端路由
Next.js advanced client-side routing
在使用 React Context 进行状态管理和基于文件系统的路由器的 Next.js 应用程序(功能齐全,不是 next export
)中,如何实现高级路由?
我想为某些页面设置先决条件,例如,如果您尝试加载 /foo
但上下文没有正确设置给定的 属性,它会将您引导至/bar
.
实际逻辑很复杂并且因页面而异,所以我正在寻找一种易于维护的方法。
请注意,这些先决条件与授权无关,因此不需要在服务器端强制执行。它更像是“你需要先填写这张表格才能去这里。”
上下文的使用施加了一些限制:
- 必须在 React 组件或自定义 Hook 中访问上下文
- 不能使用自定义服务器进行路由,因为那样会丢失上下文 - 它必须使用客户端路由
- 必须检查当前上下文(我尝试装饰
useRouter
,但是如果上下文在router.push
之前被更改,自定义Hook看到旧值)
更新:在重新路由发生之前加载页面时避免闪烁也很好,因此在这种情况下,一个附带目标是 return 加载指示器组件.
我相信你可以创建一个 HOC 并用你的 HOC 包装每个页面,例如{ 重定向:'/foo' }
// pages/bar.tsx
const Page = () => {...}
export default RouteHOC({ redirects: '/foo' })(Page)
HOC 文件将是这样的
// hoc/RouteHOC.tsx
const RouteHOC = ({ redirects }) => (WrappedComponent) => {
// you can do your logic here with the context.. even filling up a form here
// too also can.. (like returning a modal first before the real Component).
// useEffect work here too..
const { replace } = useRouter()
// then after you want to replace the url with other page
replace(redirects)
return WrappedComponent
}
我认为这很好维护。您只需在 HOC 中创建所有逻辑,当您想要更新逻辑时 - 您只需在 1 个文件中编辑它。
好吧,这是我在阅读您的问题时能想到的一个选项 - 如果我以任何方式误解了它,我深表歉意。总会有更好的出路,因为我们都知道我们每秒钟都可以改进和适应新情况 :D。干杯!!
你可以做到这一点。
const Component = () => {
const example = useExample()
return <div id='routes'>
<a href='/example1'>Example 1</a>
{example.whatever && <a href='/example2'>Example 1</a>}
</div>
}
在使用 React Context 进行状态管理和基于文件系统的路由器的 Next.js 应用程序(功能齐全,不是 next export
)中,如何实现高级路由?
我想为某些页面设置先决条件,例如,如果您尝试加载 /foo
但上下文没有正确设置给定的 属性,它会将您引导至/bar
.
实际逻辑很复杂并且因页面而异,所以我正在寻找一种易于维护的方法。
请注意,这些先决条件与授权无关,因此不需要在服务器端强制执行。它更像是“你需要先填写这张表格才能去这里。”
上下文的使用施加了一些限制:
- 必须在 React 组件或自定义 Hook 中访问上下文
- 不能使用自定义服务器进行路由,因为那样会丢失上下文 - 它必须使用客户端路由
- 必须检查当前上下文(我尝试装饰
useRouter
,但是如果上下文在router.push
之前被更改,自定义Hook看到旧值)
更新:在重新路由发生之前加载页面时避免闪烁也很好,因此在这种情况下,一个附带目标是 return 加载指示器组件.
我相信你可以创建一个 HOC 并用你的 HOC 包装每个页面,例如{ 重定向:'/foo' }
// pages/bar.tsx
const Page = () => {...}
export default RouteHOC({ redirects: '/foo' })(Page)
HOC 文件将是这样的
// hoc/RouteHOC.tsx
const RouteHOC = ({ redirects }) => (WrappedComponent) => {
// you can do your logic here with the context.. even filling up a form here
// too also can.. (like returning a modal first before the real Component).
// useEffect work here too..
const { replace } = useRouter()
// then after you want to replace the url with other page
replace(redirects)
return WrappedComponent
}
我认为这很好维护。您只需在 HOC 中创建所有逻辑,当您想要更新逻辑时 - 您只需在 1 个文件中编辑它。
好吧,这是我在阅读您的问题时能想到的一个选项 - 如果我以任何方式误解了它,我深表歉意。总会有更好的出路,因为我们都知道我们每秒钟都可以改进和适应新情况 :D。干杯!!
你可以做到这一点。
const Component = () => {
const example = useExample()
return <div id='routes'>
<a href='/example1'>Example 1</a>
{example.whatever && <a href='/example2'>Example 1</a>}
</div>
}