Что такое createBrowserRouter и чем он отличается от использования <BrowserRouter>?
Этот вопрос проверяет понимание разницы между традиционным <BrowserRouter> и современным createBrowserRouter
Короткий ответ
<BrowserRouter> обеспечивает базовую маршрутизацию с декларативным описанием маршрутов в JSX. createBrowserRouter позволяет описывать маршруты программно, предоставляя расширенные возможности, такие как загрузчики данных, обработчики ошибок и действие (action) маршрутов.
Длинный ответ
<BrowserRouter>:
- Работает через JSX.
- Маршруты описываются декларативно:
import { BrowserRouter, Routes, Route } from 'react-router-dom';
const App = () => (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
createBrowserRouter:
- Позволяет описывать маршруты в виде JavaScript-объекта.
- Поддерживает загрузчики (loaders), действия (actions), и обработку ошибок.
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
const router = createBrowserRouter([
{
path: "/",
element: <Home />,
errorElement: <NotFound />,
loader: fetchHomeData,
},
{
path: "/about",
element: <About />,
},
]);
const App = () => <RouterProvider router={router} />;
Различия:
- createBrowserRouter предоставляет больше возможностей для серверного рендеринга и управления состоянием маршрутов.
- <BrowserRouter> проще и подходит для приложений без сложной логики маршрутов.