@v_i_kaisarov

Почему не работают хуки с использованием createBrowserRouter?

668e457f8ea9d884323554.png

UserAuth.tsx

export const UserAuth = () => {
  const { hasSvPermission } = usePermission();
  const { fio, login } = useUserAuth();

  return (
    <>
      <div>Логин: {login}</div>
      <div>ФИО: {fio}</div>
    </>
  );
};


navList.ts

const NAV_LIST: INav[] = [
    {
      id: "userInfo",
      title: "Информация о пользователе",
      path: "/userInfo",
      element: UserAuth(),
      Icon: AppPortraitIcon,
    },
  ];


route.tsx

export const withRouter = (component: () => ReactNode) => () => {
  const router = createBrowserRouter(NAV_LIST);

  return (
    <>
      <RouterProvider
        router={router}
        fallbackElement={<CircularProgress size={2} />}
      />
      {component()}
    </>
  );
};


useUsersAuth.ts
export const useUsersAuth = () => {
  const fio = useSelector((state: TRootState) => state.userAuth?.info?.fio);
  const login = useSelector((state: TRootState) => state.userAuth?.info?.login);

  return { fio, login };
};


с <BrowserRouter> работало нормально, но теперь падает с ошибкой
  • Вопрос задан
  • 145 просмотров
Пригласить эксперта
Ответы на вопрос 2
Aetae
@Aetae
Тлен
Очевидно: element: UserAuth(), -> element: <UserAuth />,
Ответ написан
Seasle
@Seasle Куратор тега React
А Outlet не пробовали использовать, а не пытаться рядом с роутером положить компонент? Посмотрите внимательно в девтулзах, дотягиваетесь ли со своего компонента до нужного Вам провайдера?
Что происходит с костылём

Мой App вне роутинга, хуки, которые пытаются дотянуться до App, никогда не заработают.
668e91b0353d1031300508.png

Нормальный роутинг, сделанный по документации

Внутри моего App роутинг.
668e91d22e472331095103.png


const routes: RouteObject[] = [
  {
    path: "*",
    element: <Outlet />,
    children: [
      {
        id: "page-a",
        path: "page-a",
        element: <PageA />,
      },
      {
        id: "page-b",
        path: "page-b",
        element: <PageB />,
      },
    ],
  },
];

export const Router: FC = () => {
  const router = createBrowserRouter(routes);

  return <RouterProvider router={router} />;
};

Если надо, чтобы странички были обёрнуты в какой-то провайдер, вот, пожалуйста:
export const SuperWrapper: FC = () => {
  return (
    <ThemeProvider theme={theme}>
      <Notifications />
      <Outlet />
    </ThemeProvider>
  );
};


ЗЫ - не перестанете использовать someComponent(), то Вас ждёт удивительный мир потери состояний и прочего.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы