React-Typescript：模块“"react-router-dom"”没有导出成员 'RouteComponentProps'

Question

我有一个项目，这个项目有一个登录页面，我想使用“RouteComponentProps”，但是我收到了这个错误：

Module '"react-router-dom"' has no exported member 'RouteComponentProps'.

我尝试通过“react-router”导入它，但在我看来：

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"
  }
}

Answer 1

react-router v6 不再使用 RouteComponentProps。这里有一些 links 和 how to change route 和 how to use params on v6 with some link 的例子您可以在哪里找到更多信息：

用于更改路线（旧history.push）

如果登录成功后想更改路由react-router文档指定

In v6, this app should be rewritten to use the navigate API. Most of the time this means changing useHistory to useNavigate and changing the history.push or history.replace callsite.

所以基本上不用这个

...
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");
  }
  ...

对于 link 参数

根据 this link，当你升级到 React Router 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）：您可以找到有关接口的更多信息 here (for useNavigate) and here (for useParams)

React-Typescript：模块“"react-router-dom"”没有导出成员 'RouteComponentProps'

React-Typescript: Module '"react-router-dom"' has no exported member 'RouteComponentProps'

typescript

reactjs

redux