Как фильтровать роуты правильно используя createBrowserRouter из react-router-dom 6.4.3?

Question

[DenisBudeyko]

Добрый день, обновился до последней версии React-router-dom 6.4.3 который позволяет использовать loader функцию, смотриться это следующим образом:

export const applicationBrowserRouter = createBrowserRouter([
  {
    element: <RootApplication />,
    children: [
      {
        path: RoutesDetails.LOGIN.path,
        element: <Login />,
      },
      {
        path: RoutesDetails.FORGOT.path,
        element: <ForgotPassword />,
      },
    
      {
        path: RoutesDetails.HOME.path,
        element: <Home />,
      },
      {
        path: RoutesDetails.PRICES.path,
        element: <Prices />,
      },
    ],
    loader: async () => {
      const { user } = await getUser();

      return { user };
    },
  },
]);

И это отично ибо мы можем изначально сделать функцию которая проверяет если токены активны и делает авторизацию.
И вот так выглядит компонетнт самого RootAplication

const RootApplication: React.FC = () => {
  const { user } = useLoaderData();
  return (
    <Provider store={store}>
        <Header />
        <Outlet />
    </Provider>
  );
};

export default RootApplication;

Однако я не понимаю как массив роутов я могу зафильтровать в зависимости какой ответ я получаю с функции loader.
В массиве children у меня есть 4 роута. Prices и Home должны быть доступны лишь тогда когда user залогинился, а Login и Forgot только тогда как пользователь не залоген.

Comments

[szQocks]

Если исходить из твоего логики выходит так что на роутах где пользователь не авторизован ты хочешь получать данные а после уже проверять авторизован он или нет , делать свои якобы там фильтрации роутов, честно со стороны это кажется - бредовым подходом, без обид.

Роуты для которых нужна авторизация - просто оборачивай в хок который проверяет на то авторизован ли пользователь, как вариант, это будет уж хоть как-то получше + в самих же лоадерах как-то проверять на авторизацию, тоже как вариант.

Можно кстати в сам объект для роута прямо запилить поле которое как раз таки будет говорить о том что закрытый роут или нет.

{
        path: RoutesDetails.LOGIN.path,
        element: <Login />,
        private: false
      }