Frontend | Иван Усынин: “Завершили переезд react router 7 🔥 На прошлой неделе во всех наших пр…”

Завершили переезд react router 7 🔥

На прошлой неделе во всех наших проектах обновили react-router до 7 версии . Самое полезное что теперь можно использовать:

🔜 loader + Await для подготовки данных в маршрутах. Поможет для отдельных маршрутов получать данные из api или, например, проверять поддержку какого-либо браузерного api.

createBrowserRouter([
  {
    path: "/teams/:teamId",
    loader: async ({ params }) => {
      let team = await fetchTeam(params.teamId);
      return { name: team.name };
    },
    Component: Team,
  },
]);

function Team() {
  let data = useLoaderData();
  return <h1>{data.name}</h1>;
}

🔜 useBlocker для реализации блокировки ухода со страницы. Например, при заполнении формы до ее сохранения через данный хук можно реализовать подтверждение "Вы действительно хотите покинуть страницу?"

const Component = () => {
    const [isBlocked, setIsBlocked] = useState(false);

    useBlocker(() => isBlocked ? !confirm('Leave page?') : false);

    return (
        <React.Fragment>
            <button onClick={() => setIsBlocked(true)}>block page</button>
            <button onClick={() => setIsBlocked(false)}>unblock page</button>
        </React.Fragment>
    );
};

🔜 bonus: react-router-dom теперь не нужен! Весь необходимый функционал лежит в пакете react-router. Минус одна зависимость 🙂

Больше фишек в официальной доке: https://reactrouter.com/home

#workflow@usyninis_dev