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

Question

I have a project and with this project I have a login page and I want to use "RouteComponentProps", but I got this error:

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

And I tried to import it via "react-router", but it appeared to me:

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

How can I solve the problem?

This is part of the file I used "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"
  }
}

Furtherance

Answer 1

react-router v6 doesn't use RouteComponentProps anymore. Here are some links with examples on how to change route and how to use params on v6 with some links where you can find more informations:

For changing route (old history.push)

If you want to change the route after the login is successful react-router docs specify

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.

So basically instead of this

...
function handleClick() {
  history.push("/home");
}
...

use something like:

// This is a React Router v6 app
import { useNavigate } from "react-router-dom";
function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  ...

For link params

According to this link when you upgrate to React Router v6 you should just use import {useParams} from 'react-router-dom'; + const params = useParams(); so something like:

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

---

Edit regarding types (for ts): You can find more information about the interfaces here (for useNavigate) and another potential interesting topic here and here (for useParams)

Concordat

thanks, but i want to ask u another question that how can i edit this line like what u said: history: RouteComponentProps['history'] ? – Furtherance

I edited the answer to include links about the interfaces used by reactrouter . You shouldn't need to use history anywhere but for the useParams and useNavigate types you can find how they are defined in the links (and you should be able to import them as well). Also another topic that might be of interest on how to deal with useNavigate type you can find here: #64518483 – Concordat

Answer 2

Names may be different in new versions of the react-router-dom. For example old version

import { Redirect } from "react-router-dom";

new version

import { useNavigate } from "react-router-dom";

Laser