Next.js 高级客户端路由

Question

在使用 React Context 进行状态管理和基于文件系统的路由器的 Next.js 应用程序（全功能，not next export）中，您如何实现高级路由？

我想为某些页面设置先决条件，例如，如果您尝试加载 /foo 但上下文没有正确设置给定属性，它会将您路由到 /bar。

实际逻辑很复杂，因页面而异，所以我正在寻找一种易于维护的方法。

请注意，这些先决条件与授权无关，因此不需要在服务器端强制执行。这更像是“您需要先填写此表格才能到这里。”

上下文的使用施加了一些限制：

• 必须在 React 组件或自定义 Hook 中访问上下文
• 不能使用自定义服务器进行路由，因为这会丢失上下文 - 它必须使用客户端路由
• 必须检查当前上下文（我尝试装饰useRouter，但如果在router.push之前更改了上下文，自定义Hook会看到旧值）

更新：在重新路由发生之前页面加载时避免闪烁也很好，因此在这种情况下，一个附加目标是返回一个加载指示器组件。

Answer 1

我相信你可以创建一个 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。干杯?！！

Answer 2

你可以这样做。

const Component = () => {
  const example = useExample()

  return <div id='routes'>
    <a href='/example1'>Example 1</a>
    {example.whatever && <a href='/example2'>Example 1</a>}
  </div>
}