小编Ben*_*ier的帖子

任何大型应用程序都会有可能需要路由器重定向用户的一般上下文。由于RouterProvider只能在根级别使用。如何将它与应用程序上下文一起使用。

例如，ApiContext如果用户无权访问 API，我会重定向到 403 路由/组件。

如何将此上下文包装在 中，而RouterProvider不必在每次路由更改时重新渲染它。换句话说。我怎样才能拥有使用路由器的父上下文？

如果我使用 ，它工作得很好BrowserRouter，但在 v6.8 中卸载之前使用任何类型的提示的唯一方法是使用数据 api 和方法createBrowserRouter。

标题导航也是如此。我不希望我的标头出现在每个路由组件和路由的一部分中。我希望我的标头是静态的，而路由组件是动态的。

// Aplication Context
export const ApiContext = React.createContext({});

export const ApiProvider = memo((p: { children: React.ReactNode; }) => {
  const navigate = useNavigate();
  const [token, setToken] = useState<string>()

  if (!token) {
    navigate('/403');
  }

  const value = useMemo(() => ({}), []);
  return (
    <ApiContext.Provider value={value}>
      {p.children}
    </ApiContext.Provider>
  );
});

// Index
const router = createBrowserRouter([
  {
    path: …