我通过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这样的文件。没有工作,但作为路由器
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
来安装项目依赖项,然后重新启动应用程序。jgwigjjp2#
你不会得到这个错误:
router
已经在第5行声明了吗?下面是一个简单的例子: