@DenisBudeyko

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

Добрый день, обновился до последней версии 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 только тогда как пользователь не залоген.
  • Вопрос задан
  • 126 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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