I have installed latest react router dom and in package.js its showing "react-router-dom": "^7.0.2".and when i check npm -v react-router-dom its showing 10.9.0. And in my code
import React from "react";
import ReactDOM from "react-dom";
import Header from "./components/Header";
import Body from "./components/Body";
import About from "./components/About";
import {
createBrowserRouter as Router,
RouterProvider
} from "react-router-dom";
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} />);
I am getting and error like
@parcel/core: Failed to resolve ‘react-router/dom’ from
‘./node_modules/react-router-dom/dist/index.mjs’
D:\Namsthe\node_modules\react-router-dom\dist\index.mjs:13:48 12 |
// index.ts13 | import { HydratedRouter, RouterProvider } from "react-router/dom";
| ^^^^^^^^^^^^^^^^^^ 14 | export * from "react-router"; 15 | export
{ @parcel/resolver-default: Cannot load file ‘./dom’ from module
‘react-router’
>Solution :
React-Router 7 really changed things up how they organize their code. The RouterProvider component is not exported from react-router-dom, it comes from a more deeply nested package, the platform-specific, e.g. DOM-specific, react-router/dom. In v7, react-router is the primary entry point.
-
Uninstall
react-router-dom:npm un react-router-dom -
Install
react-router:npm i react-router@latest -
Update the import to be from
react-routerimport { createBrowserRouter as Router, RouterProvider } from "react-router";
For complete details see:
- Installation guide
- The Upgrading from v6 migration guide
- Changelog
Thank you for the simple and straight solution.