回复-类型记录:模块“反应性-路由器-多姆”没有导出成员'RouteComponentProps‘
回复-类型记录:模块“反应性-路由器-多姆”没有导出成员'RouteComponentProps‘
提问于 2021-12-16 12:23:47
我有一个项目，对于这个项目，我有一个登录页面，我想使用"RouteComponentProps"，但是我得到了以下错误：
Module '"react-router-dom"' has no exported member 'RouteComponentProps'.我试着通过“反应性路由器”导入它，但在我看来：
Module '"react-router"' has no exported member 'RouteComponentProps'.我怎样才能解决这个问题？
这是我使用“RouteComponentProps”文件的一部分：
signin.tsx：
import { RouteComponentProps } from 'react-router-dom';
interface Props {
history: RouteComponentProps['history']
}package.json：
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/styles": "^4.11.4",
"@reach/router": "^1.3.4",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.24",
"@types/node": "^12.20.37",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"@types/react-redux": "^7.1.20",
"axios": "^0.24.0",
"history": "^5.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router": "^6.1.1",
"react-router-dom": "^6.1.1",
"react-scripts": "4.0.3",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",
"thunk": "0.0.1",
"typescript": "^4.5.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/react-router": "^5.1.17",
"@types/react-router-dom": "^5.3.2",
"miragejs": "^0.1.43"
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2021-12-16 13:01:33
react-router v6不再使用RouteComponentProps了。下面是一些关于如何更改路由和如何在v6上使用params的例子的链接，在这些链接中您可以找到更多的信息：
改变路线的(旧history.push)
如果要在登录成功后更改路由，请指定反应路由器文档
在v6中，应该重写此应用程序以使用导航API。在大多数情况下，这意味着将useHistory更改为useNavigate，并更改history.push或history.replace调用站点。
所以基本上不是这个
...
function handleClick() {
history.push("/home");
}
...使用这样的方法：
// This is a React Router v6 app
import { useNavigate } from "react-router-dom";
function App() {
let navigate = useNavigate();
function handleClick() {
navigate("/home");
}
...链路仿真器的
根据此链接，当您升级到响应路由器v6时，您应该只使用import {useParams} from 'react-router-dom'; + const params = useParams();，如下所示：
import React from 'react';
import {useParams} from 'react-router-dom';
const Component: React.FC = (): JSX.Element => {
const params = useParams();
return <>Link ID parameter === "{params.id}"</>;
}关于类型的编辑(针对ts)：您可以找到关于接口这里(用于useNavigate)和另一个潜在的有趣主题这里和这里(用于useParams)的更多信息
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70378978
复制相关文章
相似问题
腾讯云开发者
