javascript react-router-dom-6-4无法找到RouterProvider

k4ymrczo 于 12个月前发布在 Java

关注(0)|答案(2)|浏览(106)

我通过NPM安装了reactreact-router-dom，即

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

找不到RouterProvider。
我试图导入它在我的主文件像这样

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>
)

这是我的包。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"
  }
}

页面上没有错误消息。是否更改了名称RouterProvider？
我找到了像BrowserRouter，StaticRouterProvider和Router这样的文件。没有工作，但作为路由器

JavaScript

来源：https://stackoverflow.com/questions/77196205/react-router-dom-6-4-unable-to-locate-routerprovider

2条答案

按热度按时间

qzwqbdag1#

您使用的react-router-dom版本不正确。如果要使用数据路由器，"react-router-dom": "^5.3.4",应该是"react-router-dom": "^6.4.0",。
请参阅使用v6.4数据API。
尝试按照以下步骤更新项目依赖关系。
1.关闭所有正在运行的开发服务器/代码监视器/热重载器等。

cd到根项目目录。
1.卸载过时的版本：npm uninstall --save react-router-dom。
1.安装当前版本：npm install --save react-router-dom，验证package.json文件中的版本是否已更新。目前的版本是v6.16.0。您还可以通过从项目根目录运行npm list react-router-dom来验证实际安装的内容。
1.重新启动应用程序，例如npm start或任何启动/运行脚本。你的应该是npm run dev。我不使用vite，所以我不知道你是否需要通过npm run build重建，然后再重新运行应用程序，以查看最新的更改。
如果你仍然有问题，你可以尝试删除"node_modules"目录并重新运行npm install来安装项目依赖项，然后重新启动应用程序。

赞(0）回复(0）举报 12个月前

jgwigjjp2#

你不会得到这个错误：router已经在第5行声明了吗？
下面是一个简单的例子：

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>
);

赞(0）回复(0）举报 12个月前

我来回答

javascript react-router-dom-6-4无法找到RouterProvider

2条答案

相关问题

热门标签

最新问答