Question 254518 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – react-router-dom-6-4 unable to locate RouterProvider

i installed react react-router-dom via NPM i.e

npm install react-router-dom localforage match-sorter sort-by

I am unable to locate the RouterProvider.

i tried to import it in my main file like this

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import router from './router.jsx'
import {RouterProvider} from "react-router-dom";


const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <div>
        <h1>Hello World</h1>
        <Link to="about">About Us</Link>
      </div>
    ),
  },
  {
    path: "about",
    element: <div>About</div>,
  },
]);


ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router}/>

{/*    <RouterProvider  router={router}/>*/}
  </React.StrictMode>
)

This is my package.json:

{
  "name": "react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --port=3000",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@heroicons/react": "^2.0.18",
    "@tailwindcss/forms": "^0.5.6",
    "localforage": "^1.10.0",
    "match-sorter": "^6.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^5.3.4",
    "sort-by": "^0.0.2"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@vitejs/plugin-react": "^4.0.3",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.45.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "postcss": "^8.4.30",
    "tailwindcss": "^3.3.3",
    "vite": "^4.4.5"
  }
}

There are no error messages on the page. Has the name RouterProvider been changed?

i found files like BrowserRouter, StaticRouterProvider and also Router. None work though as a router

Tags:

2

Answers


  1. 0

    Don’t you get this error: router is already declared in line 5 ?

    Here’s a simple example to start with:

    import * as React from "react";
import * as ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import "./index.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);
    Login or Signup to reply.
  2. 0

    You are using the incorrect version of react-router-dom. "react-router-dom": "^5.3.4", should be "react-router-dom": "^6.4.0", if you want to use data routers.

    See Using v6.4 Data APIs.

    Try to follow these steps to get the project dependency updated.

    1. Kill any running development servers/code watchers/hot-reloaders/etc.
    2. cd to the root project directory.
    3. Uninstall outdated version: npm uninstall --save react-router-dom.
    4. Install current version: npm install --save react-router-dom, verify the version in the package.json file was updated. Current version as of this posting is v6.16.0. You could also verify what is actually installed by running npm list react-router-dom from the root project directory.
    5. Restart app, e.g. npm start or whatever your starting/run script is. It looks like yours would be npm run dev. I don’t use vite so I have no idea if you would need to rebuild via npm run build first before re-running the app to see the latest changes.

    If you have issues still, you could try also deleting the "node_modules" directory and re-running npm install to install the project dependencies, and restart the app.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search