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

Question

[v_i_kaisarov]

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> работало нормально, но теперь падает с ошибкой

Comments

[Alexandroppolus]

Судя по стектрейсу, проблема где-то в файле ./src/variables/navList.ts (см. 4 строку снизу), содержимое которого пока остается тайной...

[Melk0or]

Как по мне дело не в тех файлах что ты скинул. Да и что за функция component. мало инфы

[v_i_kaisarov]

Alexandroppolus, перенес под отдельный спойлер navList, до этого в route написал содержимое просто. Если взглянуть чуть выше, то там видно что дальше идет вызов в userAuth уже.

[v_i_kaisarov]

Melk0or, а в каких файлах может быть проблема? В ошибке вроде сказано что она как раз происходит в userAuth, и там пытается вызвать хук, и падает

[Melk0or]

v_i_kaisarov, как минимум еще useUsersAuth посмотреть бы

[v_i_kaisarov]

Melk0or, Обновил, но сомневаюсь что дело в нем, он работал коректно пока я не решил использовать createBrowserRouter

[Melk0or]

v_i_kaisarov, Не знаю зачем столь маленькую часть логики выводить в отдельный хук, но попробуй переместить эту логику в UserAuth и проверить , работает ли, так ты точно убедишься что дело не в том, что ты нарушил правила хуков. И еще. Что за функция component, и почему ты ее вызываешь внутри jsx разметки, нельзя компоненты вызывать как функции))

[Владислав Андреев]

Разве нельзя вместо {component()} положить туда children который в пропсах будет содержаться?

Answer 1

[Aetae]

Очевидно: element: UserAuth(), -> element: <UserAuth />,

Comments

[v_i_kaisarov]

Пробовал уже так, не работает

[szQocks]

v_i_kaisarov, {component()}
а что это ?

[Melk0or]

szQocks, приколдес

[v_i_kaisarov]

szQocks, дополнил route.tsx
это вот так вот используется потом

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Notifications />
    </ThemeProvider>
  );
};

export default withRouter(App);

[Aetae]

v_i_kaisarov, тогда очевидно, что {component()} -> <component />. Но такое себе.

[Melk0or]

Aetae, видимо не очевидно, раз до сих пор люди так пишут.

[szQocks]

Aetae, ну да, у меня тоже идей больше нет что тут можно ещё посоветовать кроме того как монтировать компонент таким образом, а не вызывая как функцию

[WbICHA]

Aetae, только с заглавной буквы, иначе jsx не поймёт.

Answer 2

[Александр]

А Outlet не пробовали использовать, а не пытаться рядом с роутером положить компонент? Посмотрите внимательно в девтулзах, дотягиваетесь ли со своего компонента до нужного Вам провайдера?

Что происходит с костылём

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

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

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

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(), то Вас ждёт удивительный мир потери состояний и прочего.