在Next.js应用程序中(功能齐全，而不是)next export)使用React Context进行状态管理和基于文件系统的路由器，如何实现高级路由?
我想对某些页面有先决条件，所以例如，如果你试图加载/foo，但上下文没有正确设置给定的属性，它会将你路由到/bar。
实际的逻辑是复杂的，不同的页面，所以我正在寻找一种方法，很容易维护。
注意这些前提条件是而不是与授权相关，因此不需要在服务器端强制执行。它更像是"你需要先填好这张表格，然后才能来这里。">
Context的使用有一些限制:
- Context必须在React组件或自定义Hook 中访问
- 使用自定义服务器进行路由不是一个选项，因为这会丢失上下文——它必须使用客户端路由
- 当前上下文必须检查(我尝试装饰
useRouter，但如果上下文在router.push之前更改，则自定义钩子看到旧值)
更新:在重路由发生之前，避免页面加载时的flash也是很好的，所以在这种情况下，一个次要目标是返回一个加载指示器组件。
我相信你可以创建一个HOC，用你的HOC包装每个页面，它接受参数，例如{redirects: '/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中创建所有的逻辑，当你想要更新逻辑时，你只需要在一个文件中编辑它。
嗯，这是我在阅读你的问题时能想到的一个选项-如果我以任何方式误解了它，对不起。总有更好的方法，因为我们都知道我们每一秒都能改进和适应新的情况。欢呼声🥂! !
你可以这样做。
const Component = () => {
const example = useExample()
return <div id='routes'>
<a href='/example1'>Example 1</a>
{example.whatever && <a href='/example2'>Example 1</a>}
</div>
}