When I write createBrowserRouter as Router
, I am getting this error:
ReferenceError: createBrowserRouter is not defined.
But when I don’t use as Router
, my code works properly. Why is this happening? Which one is correct? I am confused
import React from "react";
import ReactDOM from "react-dom/client";
import Header from "./components/Header";
import Body from "./components/Body";
import About from "./components/About";
import { createBrowserRouter, RouterProvider } from "react-router";
const AppLayout = () => {
return (
<div className="App">
<Header />
<Body />
</div>
);
};
const appRouter = createBrowserRouter([
{ path: "/", element: <AppLayout /> },
{ path: "About", element: <About /> },
]);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<RouterProvider router={appRouter} />);