Link State Typescript Error: "state: { id: any; name: any; }; }' is not assignable to type-CodePudding

I'm trying to pass state through a <Link />, which I have been able to do in the past without typescript. However typescript is throwing an error I'm not sure how to fix...

This is my packages I'm using...

  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@mdi/js": "^6.2.95",
    "@mdi/react": "^1.5.0",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "@types/lodash.debounce": "^4.0.6",
    "@react-google-maps/api": "^2.2.0",
    "@types/md5": "^2.3.1",
    "axios": "^0.21.1",
    "axios-auth-refresh": "^3.2.1",
    "eslint-plugin-prettier": "^3.4.0",
    "lodash.debounce": "^4.0.8",
    "formik": "^2.2.9",
    "geolib": "^3.3.1",
    "http-proxy-middleware": "^2.0.1",
    "md5": "^2.3.0",
    "node-sass": "^6.0.1",
    "papaparse": "^5.3.0",
    "prettier": "^2.3.0",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.1",
    "react-code-input": "^3.10.1",
    "react-collapse": "^5.1.0",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-media": "^1.10.0",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "redux": "^4.1.1",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "sass": "^1.37.5",
    "sass-loader": "^12.1.0",
    "web-vitals": "^1.1.2",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/google.maps": "^3.45.6",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-collapse": "^5.0.1",
    "@types/react-dom": "^17.0.0",
    "@types/react-redux": "^7.1.18",
    "@types/react-router-dom": "^5.1.8",
    "@typescript-eslint/eslint-plugin": "4.0.1",
    "@typescript-eslint/parser": "4.0.1",
    "@types/redux": "^3.6.0",
    "@types/redux-logger": "^3.0.9",
    "@types/redux-thunk": "^2.1.0",
    "eslint": "^7.3.1",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-jsdoc": "^28.6.1",
    "typescript": "^3.9.6"
  },

CodePudding user response：

Based on the docs, it looks like you have to pass Link a to object containing all the information:

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>