Next.js 高级客户端路由

Question

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

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

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

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

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

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

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

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>
}

Next.js 高级客户端路由

Next.js advanced client-side routing

next.js

url-routing

react-context